Activate Normal CreationDate 459277106.46800703 CustomIconData KMEP-GenericWindow Macros Actions ActionColor Yellow MacroActionType Comment StyledText cnRmZAAAAAADAAAAAgAAAAcAAABU WFQucnRmAQAAAC4lAwAAKwAAAAEA AAAdAwAAe1xydGYxXGFuc2lcYW5z aWNwZzEyNTJcY29jb2FydGYxNTYx XGNvY29hc3VicnRmNjAwCntcZm9u dHRibFxmMFxmc3dpc3NcZmNoYXJz ZXQwIEhlbHZldGljYTt9CntcY29s b3J0Ymw7XHJlZDI1NVxncmVlbjI1 NVxibHVlMjU1O1xyZWQwXGdyZWVu MFxibHVlMDt9CntcKlxleHBhbmRl ZGNvbG9ydGJsOztcY3NncmF5XGMw O30KXHBhcmRcdHg1NjBcdHgxMTIw XHR4MTY4MFx0eDIyNDBcdHgyODAw XHR4MzM2MFx0eDM5MjBcdHg0NDgw XHR4NTA0MFx0eDU2MDBcdHg2MTYw XHR4NjcyMFxwYXJkaXJuYXR1cmFs XHBhcnRpZ2h0ZW5mYWN0b3IwCgpc ZjBcZnMyNCBcY2YwIFZlcnNpb24g ICAgIDAuOWtcCk1vZGlmaWVkCTIw IFNlcHRlbWJlciAyMDE5XApUYWdz CQlAbXJwYXNpbmksIEBLTUZvcnVt XApBdXRob3IJTWlrZSBQYXNpbmkg PG1ycGFzaW5pQGdtYWlsLmNvbT5c ClxwYXJkXHR4NTYwXHR4MTEyMFx0 eDE2ODBcdHgyMjQwXHR4MjgwMFx0 eDMzNjBcdHgzOTIwXHR4NDQ4MFx0 eDUwNDBcdHg1NjAwXHR4NjE2MFx0 eDY3MjBccGFyZGlybmF0dXJhbFxw YXJ0aWdodGVuZmFjdG9yMAoKXGZz MjYgXGNmMiBcCk5hcGtpbiBjYW4g YXBwZW5kIHRleHQgbm90ZXMgdG8g YSBmaWxlIG9yIHNhdmUgUE5HIGRy YXdpbmdzLlwKXApUaGlzIHZlcnNp b24gY29uZmlndXJlcyBpdHNlbGYg Zm9yIGVpdGhlciBLTTggb3IgS005 LiBUaGUgS005IGNvbmZpZ3VyYXRp b24gdXNlcyBuZXcgS00gOSBmZWF0 dXJlcyB0byBoaWRlIHRoZSBBcHBs aWNhdGlvbnMgUGFsZXR0ZSBhbmQg c2VsZWN0IGZpbGVzIGFuZCBmb2xk ZXJzLn0BAAAAIwAAAAEAAAAHAAAA VFhULnJ0ZhAAAAC7qIVdtgEAAAAA AAAAAAAA Title Napkin ActionColor Purple ActionName Get KM version DisplayKind Variable HonourFailureSettings IncludeStdErr IsDisclosed MacroActionType ExecuteShellScript Path Source Nothing Text mdls -raw -name kMDItemVersion /Applications/Keyboard\ Maestro.app TimeOutAbortsMacro TrimResults TrimResultsNew UseText Variable napkinKMversion ActionColor Purple ActionName If v9, hide Applications Palette Conditions ConditionList ConditionType Variable Variable napkinKMversion VariableConditionType StartsWith VariableValue 9 ConditionListMatch All ElseActionListDisclosed ElseActions IsDisclosed MacroActionType IfThenElse ThenActions Action Hide ActionColor Magenta IsDisclosed MacroActionType ApplicationsPaletteToggle TimeOutAbortsMacro ActionColor Purple ActionName Default mode is Text Conditions ConditionList ConditionType Variable Variable napkinMode VariableConditionType IsEmpty VariableValue text ConditionType Variable Variable napkinMode VariableConditionType DoesNotExist VariableValue value ConditionListMatch All ElseActions IsDisclosed MacroActionType IfThenElse ThenActions MacroActionType SetVariableToText Text text Variable napkinMode TimeOutAbortsMacro ActionColor Magenta ActionName Main Actions ActionColor Teal CaseEntries Actions ActionColor Purple ActionListDisclosed ActionName Set Defaults Actions ActionColor Teal ActionName If no text directory set... Conditions ConditionList ConditionType Variable Variable napkinTextDir VariableConditionType DoesNotExist VariableValue value ConditionType Variable Variable napkinTextDir VariableConditionType IsEmpty VariableValue value ConditionListMatch Any ElseActions MacroActionType IfThenElse ThenActions ActionColor Magenta DisplayKind Variable HonourFailureSettings IncludeStdErr MacroActionType ExecuteAppleScript NotifyOnFailure Path StopOnFailure Text tell application (path to frontmost application as text) to set thePath to choose folder with prompt "Choose a Folder to store Text mode Napkins:" set thePath to the POSIX path of thePath TimeOutAbortsMacro TrimResults TrimResultsNew UseText Variable napkinTextDir TimeOutAbortsMacro ActionColor Teal ActionName If no last text file name saved... Conditions ConditionList ConditionType Variable Variable napkinTextFile VariableConditionType DoesNotExist VariableValue value ConditionType Variable Variable napkinTextFile VariableConditionType IsEmpty VariableValue value ConditionListMatch Any ElseActions IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Magenta MacroActionType SetVariableToText Text note.txt Variable napkinTextFile TimeOutAbortsMacro ActionColor Teal IsDisclosed MacroActionType SetVariableToText Text ——— %Variable%napkinSlug%%ICUDateTimeFor%NOW() %d MMMM yyyy • hh:mm a zzz% ——— Variable napkinHeader IsDisclosed MacroActionType Group TimeOutAbortsMacro ActionColor Purple ActionName Custom Floating HTML Prompt: Text Mode Form Floating IsDisclosed MacroActionType CustomPrompt Text <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>N A P K I N</title> <style type="text/css"> body{background:slategray;font:.85em "Lucida Grande",serif;color:white;margin:0}#title{background-color:#8bb0f2;color:white;text-shadow:2px 2px 3px steelblue;font-size:1.1em;width:48%;padding:5px 0 5px 12px;margin:0 0 12px 12px;letter-spacing:6px;font-weight:bold}.right{text-align:right;padding-right:10px}.input{background-color:#fff;color:#5a698b;border-radius:3px;border:1px solid #8595b2;font-size:.85em}input:invalid{border-color:red}input,input:valid{border-color:#ccc}.button,.button-sq,.button-sm,.button-pu{background-color:white;border:1px solid cornflowerblue;color:cornflowerblue;padding:3px 3px;text-align:center;text-decoration:none;display:inline-block;font-size:12px;font-weight:bold;margin:0 2px;cursor:pointer;width:60px}.button{padding:3px 3px;font-weight:bold;border-radius:6px;width:60px}.button-sq{padding:3px 3px;font-weight:bold;border-radius:6px;float:right;font-family:Apple Color Emoji;font-size:14px;line-height:14px;width:30px;height:26px}.button-sm{padding:0 3px 2px 3px;font-size:11px;line-height:11px;border-radius:4px;width:18px;height:18px}.button-pu{padding:0 3px 2px 0;width:19px;height:19px;border-radius:0 3px 3px 0;margin-left:-16px}.button:hover,.button-sq:hover,.button-sm:hover,.button-pu:hover{background-color:cornflowerblue;color:white}.center{text-align:center}.right{text-align:right}a{color:white}blockquote{margin:0 0 0 10px} </style> </head> <body data-kmwindow="SCREEN(Main,Left,84%),SCREEN(Main,Top,2%),328,520"> <button class="button-sq" name="napkinSearch" type="button" title="Launch Textcavator" onclick="window.KeyboardMaestro.Submit('napkinSearch')" style="margin:7px 12px;">&#128269;</button> <button class="button-sq" name="napkinRestore" type="button" title="Restore text;" onclick="window.KeyboardMaestro.Submit('Restore')" style="margin:7px -3px;font-size:18px;line-height:18px;"><b>↺</b></button> <button class="button-sq" name="napkinMode" type="button" title="Switch to Draw" onclick="window.KeyboardMaestro.Submit('napkinMode')" style="margin:7px 12px;">🖋</button> <div id="title">N A P K I N</div> <blockquote> <form id="form" action="#" method="post" align="left"> <textarea id="myTextarea" name="napkinText" class="input" rows="22" cols="37" title="Text entry with drag-and-drop, dictation and tab support" placeholder="Drop some text in..." style="padding:0.25rem" autofocus required><script>document.getElementById("myTextarea").value=document.write(window.KeyboardMaestro.GetVariable('napkinText'))</script></textarea> <script> /*! taboverride v4.0.3 | https://github.com/wjbryant/taboverride (c) 2015 Bill Bryant | http://opensource.org/licenses/mit */ !function(a){"use strict";var b;"object"==typeof exports?a(exports):"function"==typeof define&&define.amd?define(["exports"],a):(b=window.tabOverride={},a(b))}(function(a){"use strict";function b(a,b){var c,d,e,f=["alt","ctrl","meta","shift"],g=a.length,h=!0;for(c=0;g>c;c+=1)if(!b[a[c]]){h=!1;break}if(h)for(c=0;c<f.length;c+=1){if(e=f[c]+"Key",b[e])if(g){for(h=!1,d=0;g>d;d+=1)if(e===a[d]){h=!0;break}}else h=!1;if(!h)break}return h}function c(a,c){return a===q&&b(s,c)}function d(a,c){return a===r&&b(t,c)}function e(a,b){return function(c,d){var e,f="";if(arguments.length){if("number"==typeof c&&(a(c),b.length=0,d&&d.length))for(e=0;e<d.length;e+=1)b.push(d[e]+"Key");return this}for(e=0;e<b.length;e+=1)f+=b[e].slice(0,-3)+"+";return f+a()}}function f(a){a=a||event;var b,e,f,g,h,i,j,k,l,s,t,w,x,y,z,A,B,C,D=a.currentTarget||a.srcElement,E=a.keyCode,F="character";if((!D.nodeName||"textarea"===D.nodeName.toLowerCase())&&(E===q||E===r||13===E&&u)){if(v=!1,f=D.value,k=D.scrollTop,"number"==typeof D.selectionStart)l=D.selectionStart,s=D.selectionEnd,t=f.slice(l,s);else{if(!o.selection)return;g=o.selection.createRange(),t=g.text,h=g.duplicate(),h.moveToElementText(D),h.setEndPoint("EndToEnd",g),s=h.text.length,l=s-t.length,n>1?(i=f.slice(0,l).split(m).length-1,j=t.split(m).length-1):i=j=0}if(E===q||E===r)if(b=p,e=b.length,y=0,z=0,A=0,l!==s&&-1!==t.indexOf("\n"))if(w=0===l||"\n"===f.charAt(l-1)?l:f.lastIndexOf("\n",l-1)+1,s===f.length||"\n"===f.charAt(s)?x=s:"\n"===f.charAt(s-1)?x=s-1:(x=f.indexOf("\n",s),-1===x&&(x=f.length)),c(E,a))y=1,D.value=f.slice(0,w)+b+f.slice(w,x).replace(/\n/g,function(){return y+=1,"\n"+b})+f.slice(x),g?(g.collapse(),g.moveEnd(F,s+y*e-j-i),g.moveStart(F,l+e-i),g.select()):(D.selectionStart=l+e,D.selectionEnd=s+y*e,D.scrollTop=k);else{if(!d(E,a))return;0===f.slice(w).indexOf(b)&&(w===l?t=t.slice(e):A=e,z=e),D.value=f.slice(0,w)+f.slice(w+A,l)+t.replace(new RegExp("\n"+b,"g"),function(){return y+=1,"\n"})+f.slice(s),g?(g.collapse(),g.moveEnd(F,s-z-y*e-j-i),g.moveStart(F,l-A-i),g.select()):(D.selectionStart=l-A,D.selectionEnd=s-z-y*e)}else if(c(E,a))g?(g.text=b,g.select()):(D.value=f.slice(0,l)+b+f.slice(s),D.selectionEnd=D.selectionStart=l+e,D.scrollTop=k);else{if(!d(E,a))return;0===f.slice(l-e).indexOf(b)&&(D.value=f.slice(0,l-e)+f.slice(l),g?(g.move(F,l-e-i),g.select()):(D.selectionEnd=D.selectionStart=l-e,D.scrollTop=k))}else if(u){if(0===l||"\n"===f.charAt(l-1))return void(v=!0);if(w=f.lastIndexOf("\n",l-1)+1,x=f.indexOf("\n",l),-1===x&&(x=f.length),B=f.slice(w,x).match(/^[ \t]*/)[0],C=B.length,w+C>l)return void(v=!0);g?(g.text="\n"+B,g.select()):(D.value=f.slice(0,l)+"\n"+B+f.slice(s),D.selectionEnd=D.selectionStart=l+n+C,D.scrollTop=k)}return a.preventDefault?void a.preventDefault():(a.returnValue=!1,!1)}}function g(a){a=a||event;var b=a.keyCode;if(c(b,a)||d(b,a)||13===b&&u&&!v){if(!a.preventDefault)return a.returnValue=!1,!1;a.preventDefault()}}function h(a,b){var c,d=x[a]||[],e=d.length;for(c=0;e>c;c+=1)d[c].apply(null,b)}function i(a){function b(b){for(c=0;f>c;c+=1)b(a[c].type,a[c].handler)}var c,d,e,f=a.length;return o.addEventListener?(d=function(a){b(function(b,c){a.removeEventListener(b,c,!1)})},e=function(a){d(a),b(function(b,c){a.addEventListener(b,c,!1)})}):o.attachEvent&&(d=function(a){b(function(b,c){a.detachEvent("on"+b,c)})},e=function(a){d(a),b(function(b,c){a.attachEvent("on"+b,c)})}),{add:e,remove:d}}function j(a){h("addListeners",[a]),l.add(a)}function k(a){h("removeListeners",[a]),l.remove(a)}var l,m,n,o=window.document,p="\t",q=9,r=9,s=[],t=["shiftKey"],u=!0,v=!1,w=o.createElement("textarea"),x={};l=i([{type:"keydown",handler:f},{type:"keypress",handler:g}]),w.value="\n",m=w.value,n=m.length,w=null,a.utils={executeExtensions:h,isValidModifierKeyCombo:b,createListeners:i,addListeners:j,removeListeners:k},a.handlers={keydown:f,keypress:g},a.addExtension=function(a,b){return a&&"string"==typeof a&&"function"==typeof b&&(x[a]||(x[a]=[]),x[a].push(b)),this},a.set=function(a,b){var c,d,e,f,g,i,l;if(a)for(c=arguments.length<2||b,d=a,e=d.length,"number"!=typeof e&&(d=[d],e=1),c?(f=j,g="true"):(f=k,g=""),i=0;e>i;i+=1)l=d[i],l&&l.nodeName&&"textarea"===l.nodeName.toLowerCase()&&(h("set",[l,c]),l.setAttribute("data-taboverride-enabled",g),f(l));return this},a.tabSize=function(a){var b;if(arguments.length){if(a&&"number"==typeof a&&a>0)for(p="",b=0;a>b;b+=1)p+=" ";else p="\t";return this}return"\t"===p?0:p.length},a.autoIndent=function(a){return arguments.length?(u=a?!0:!1,this):u},a.tabKey=e(function(a){return arguments.length?void(q=a):q},s),a.untabKey=e(function(a){return arguments.length?void(r=a):r},t)}); </script> <script> tabOverride.set(document.getElementsByTagName('textarea')); </script> <table width="300" style="color:#a4c0f4;font-size:14px;"> <tr valign="middle"> <td align="right">Slug</td> <td> <input name="napkinSlug" class="input" type="text" size="30" placeholder="News Clippings" title="Optional slug preceding each time-stamped entry" /> <select class="button-pu" name="napkinPickSlug" type="button" title="Select a favorite file" onclick="window.KeyboardMaestro.Submit('napkinPickSlug')">&#x25BC; <optgroup label="News Outlets"> <option value="Guardian">Guardian</option> <option value="Politico">Politico</option> <option value="ProPublica">ProPublica</option> <option value="NPR">NPR</option> <option value="NYT">NYT</option> <option value="Washington Post">Washington Post</option> </optgroup> <option disabled></option> <optgroup label="Coding"> <option value="Keyboard Maestro Note">Keyboard Maestro Note</option> <option value="Eclectic Light">Eclectic Light</option> <option value="David Walsh">David Walsh</option> <option value="Jeffrey Zeldman">Jeffrey Zeldman</option> </optgroup> <option disabled></option> <optgroup label="Misc"> <option value="Slashdot">Slashdot</option> <option value="Limpert">Limpert</option> </optgroup> </select> </td> </tr> <tr valign="middle"> <td align="right">File</td> <td> <input name="napkinTextFile" class="input" type="text" size="27" placeholder="filename.txt" title="Format: filename.ext" required /> <select class="button-pu" name="napkinPickFav" type="button" title="Select a favorite file" onclick="window.KeyboardMaestro.Submit('napkinPickFav')">&#x25BC; <optgroup label="Code"> <option value="/Users/mrpasini/Documents/my Code/Keyboard Maestro/applescript.txt">KM: AppleScript</option> <option value="/Users/mrpasini/Documents/my Code/Keyboard Maestro/javascript.txt">KM: JavaScript</option> <option value="/Users/mrpasini/Documents/my Tools/Perl Scripts/perl.txt">Perl</option> </optgroup> <option disabled></option> <optgroup label="News Clippings"> <option value="/Users/mrpasini/Documents/Working/clippings.txt">clippings.txt</option> </optgroup> <option disabled></option> <optgroup label="Photography"> <option value="/Users/mrpasini/Documents/Client/Photo Corners/ Current Stories/notes.txt">Photography Notes</option> </optgroup> <option disabled></option> </select> <button class="button-sm" name="napkinPickFile" type="button" title="Select an existing file" onclick="window.KeyboardMaestro.Submit('napkinPickFile')">&#x25B6;</button> </td> </tr> <tr valign="middle"> <td align="right">Folder</td> <td> <input name="napkinTextDir" class="input" type="text" size="28" placeholder="~/Documents/Napkins/" title="Existing folders only" required /> <button class="button-sm" name="napkinPickDir" type="button" title="Select an existing folder" onclick="window.KeyboardMaestro.Submit('napkinPickDir')">&#x25B6;</button> </td> </tr> </table> </form> <div class="right"> <hr width="98%"> <button class="button" name="Help" type="button" onclick="window.KeyboardMaestro.Submit('Help ')" style="position:absolute;left:10px;">Help</button> <button class="button" name="Quit" type="button" onclick="window.KeyboardMaestro.Cancel('Quit')">Quit</button> <button class="button" name="Open" type="button" onclick="window.KeyboardMaestro.Submit('View')">View</button> <button class="button" name="Save" type="button" onclick="if ( document.getElementById('form').checkValidity() ) { window.KeyboardMaestro.Submit('Save') } else { document.getElementById('form').reportValidity() }">Save</button> </div> </blockquote> </body> </html> TimeOutAbortsMacro UseText ActionColor Purple ActionName If napkinText is not empty set Backup Conditions ConditionList ConditionType Variable Variable napkinText VariableConditionType IsNotEmpty VariableValue value ConditionListMatch All ElseActionListDisclosed ElseActions IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Magenta MacroActionType SetVariableToText Text %Variable%napkinText% Variable napkinTextBackup TimeOutAbortsMacro ActionColor Purple ActionName Evaluate results CaseEntries Actions ActionColor Magenta ActionName Custom Floating HTML Prompt: Text Documentation Floating MacroActionType CustomPrompt Text <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>N A P K I N</title> <style type="text/css"> body{background:slategray;font:.85em "Lucida Grande",serif;color:white;margin:0}#title{background-color:#8bb0f2;color:white;text-shadow:2px 2px 3px steelblue;font-size:1.1em;width:44%;padding:5px 0 5px 12px;margin:0 0 12px 12px;letter-spacing:6px;font-weight:bold} .right{text-align:right;padding-right:10px}.submit{height:29px;width:100%;padding-top:5px;clear:both}.button{background-color:white;border:1px solid cornflowerblue;color:cornflowerblue;padding:3px 3px;text-align:center;text-decoration:none;display:inline-block;font-size:12px;font-weight: bold;margin:0 2px;cursor:pointer;border-radius:6px;width:60px}.button:hover{background-color:cornflowerblue;color:white}blockquote{margin-left:20px}h2{color:lightsteelblue;letter-spacing:6px;font-weight:normal}h3{color:#8bb0f2;font-weight:bold}li{margin-bottom:1em}a,a:link,a:visited,a:active{text-decoration:none;color:navy}a:hover{text-decoration:underline;color:white}code{font:1.2em "Courier",serif;text-shadow:2px 2px 3px steelblue;color:lightsteelblue}p{margin-left:20px;} </style> </head> <body data-kmwindow="SCREEN(Main,Left,55%),SCREEN(Main,Top,15%),525,600"> <div id="title"> N A P K I N </div> <blockquote> <p> <i>26 June 2019</i></p> <a name="co"></a> <h3> CONTENTS: TEXT MODE</h3> <hr> <div style="float:left;width:80px;padding:10px;"> <p> <a href="#in">Introduction</a></p> </div> <div style="float:left;width:70px;padding:10px;margin-left:10px;"> <p> USING NAPKIN</p> <p> <a href="#tw">Two Modes</a><br> <a href="#de">Defaults</a><br> <a href="#te">Data&nbsp;Entry</a><br> <a href="#fo">Formatting</a><br> <a href="#mo">More</a></p> </div> <div style="float:left;width:70px;padding:10px;margin-left:5px;"> <p> INTERFACE</p> <p> <a href="#re">Restore</a><br> <a href="#se">Search</a><br> <a href="#op">Help</a><br> <a href="#vi">View</a><br> <a href="#qu">Quit</a><br> <a href="#sa">Save</a></p> </div> <div style="float:left;width:70px;padding:10px;margin-left:5px;"> <p> <a href="#cn">Conclusion</a></p> </div> <br clear="all"> <hr> <a name="in"></a> <h3> INTRODUCTION <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> When you press <code>Command-Right Arrow</code> to activate Napkin, this note-taking macro will sit on the right side of the screen in the front of other windows as you work in other applications.</p> <p> It features two modes: a Text mode to save text snippets and a Draw mode to save images and sketches.</p> <p> Text napkins are written to text files that can be opened by Napkin in your default text editor and searched using your editor's Find command or Textcavator, a Keyboard Maestro that searches multiple files in a directory.</p> <p> Your Draw napkins are bitmaps on which you can drop existing images, annotate them or simply sketch from scratch on a white background. Draw napkins are saved as PNG images files.</p> <p> &nbsp;</p> <h2> U S I N G &nbsp; N A P K I N</h2> <a name="tw"></a> <h3> TWO MODES <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> You're currently in Text mode. The <code>Mode</code> button (third from right at the top) indicates which mode you are in using a fountain pen 🖋 for Text mode and a red crayon 🖍 for Draw mode.</p> <p> Text mode provides a text entry area as described below. Draw mode, which is described in its <code>Help</code> button, provides a compact canvas area to scribble diagrams and drawings instead.</p> <a name="de"></a> <h3> DEFAULTS <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> On first start, if no default path has been set you'll be prompted to select an existing folder.</p> <p> If no default file has been set, <code>note.txt</code> will be used.</p> <p> Default popup options for Slug and File name are generic. Edit the HTML form using the following instructions to set your own.</p> <p> The basic formula for Slugs follows:</p> <pre style="font-family:Courier,sans-serif;font-size:smaller;color:navy;margin-left:20px;"> &lt;optgroup label="Coding"&gt; &lt;option value="David Walsh"&gt;David Walsh&lt;/option&gt; &lt;option value="Jeffrey Zeldman"&gt;Jeffrey Zeldman&lt;/option&gt; &lt;/optgroup&gt; </pre> <p> The optgroup pair can be omitted. The value is what will appear in your Napkin file, the text between delimiters is what you see in the popup menu.</p> <p> The favorite Files popup uses the path as the value:</p> <pre style="font-family:Courier,sans-serif;font-size:smaller;color:navy;margin-left:20px;"> &lt;optgroup label="News Clippings"&gt; &lt;option value="~/Documents/clippings.txt"&gt;clippings.txt&lt;/option&gt; &lt;/optgroup&gt; </pre> <p> Each time you hit the <code>Save</code> button, the current Note will be stored on the path and in the file indicated. If the file exists, the Note will be appended to it. If it doesn't exist, the file will be created and the Note written to it.</p> <a name="te"></a> <h3> DATA ENTRY <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Napkin's Text mode collects four kinds of information. They include the text to save, the file name, the path or folder to that filename and an optional slug. <p> TEXT</p> <p> To enter text in the Text entry box, which is just an HTML textarea field with some special properties, you may:</p> <ul> <li>Type your own comments, editing as required</li> <li>Drag text from the source to the Note box</li> <li>Copy and paste or type your own text</li> <li>Start the Dictation command (Fn Fn) to enter notes using your own voice</li> </ul> <p> Tabbing (as well as <code>Shift-Tab</code> on both a line or a selection) is supported within the textarea, which can be useful for outlining.</p> <p> SLUG, FILE, FOLDER</p> <p> Below the text entry area is a dashboard showing the current slug, file and directory (or folder). These fields are editable.</p> <ul> <li><code>Slug</code> is an option title that will precede the date/time stamp divider between notes. Individual notes are simply whatever you have in the text entry box when you hit <code>Save</code>.</li> <li><code>File</code> may not exist yet (but will be created on Save) or it may be an existing file.</li> <li><code>Folder</code> is the path the file will be written to.</li> </ul> <p> To change any of those options, edit their field directly or, alternately, use the adjacent button.</p> <p> The first item -- <code>Slug</code> -- adds your text to the front of the date/time stamp divider between notes. A popup can be customized to store frequently used slugs.</p> <p> The default divider is just the date/time stamp:</p> <p style="font-family:Courier,sans-serif;color:navy;margin-left:40px;"> ——— 11 June 2019 • 02:30 PM PDT ———</p> <p> If we add the slug "Clippings • " we get:</p> <p style="font-family:Courier,sans-serif;color:navy;margin-left:40px;"> ——— Clippings • 11 June 2019 • 02:31 PM PDT ———</p> <p> Note the bullet (<code>option-8</code>) and space for formatting is appended automatically after your slug.</p> <p> The last two -- for <code>File</code> and <code>Folder</code> -- include a button to navigate from the default location to a new file or folder, saving you the trouble of keyboarding it.</p> <p> The <code>File</code> field also includes a popup menu which you can populate with standard note files. For example, we have entries for source code in various languages and news clippings. So whenever we run across one or the other, we just have to popup the File menu to select the right Napkin file to save it in.</p> <p> You can type a non-existing File name to create the file when you eventually hit the <code>Save</code> button. Or you can type an existing file name to append to it.</p> <a name="fo"></a> <h3> FORMATTING <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Notes are formatted, stripping any leading or trailing white space in the note before prefixing the divider and adding a double return at the end.</p> <p> Each save is date/time stamped.</p> <p> If you use a <code>Slug</code>, you can change the slug on each save to indicate different sources or main sections of the file. For example, if you save snippets from surfing the Web, you can set the slug to a paticular site name and save the file when you are ready to visit another sitte.</p> <a name="mo"></a> <h3> MORE <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> The entry window stays active until you <code>Quit</code>.</p> <p> The current file and path are saved for the next round.</p> <p> Hover over any of the fields or their buttons for help.</p> <p> &nbsp;</p> <h2> I N T E R F A C E</h3> <a name="re"></a> <h3> RESTORE <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> As a precaution, Napkin stores a copy of the text you've collected in a backup variable whenever you tap one of its buttons. That's not a live update, but close.</p> <p> If you want to restore the text you were working on, clicking the <code>Restore</code> button to the left of the magnifying glass will place the backup text in the text entry area.</p> <a name="se"></a> <h3> SEARCH <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> The magnifying glass icon in the top right will open <a href="https://forum.keyboardmaestro.com/t/textcavator/9510">Textcavator</a> in a separate window for searching directories of your Napkin and other files. Textcavator is a free Keyboard Maestro macro by the same author.</p> <a name="he"></a> <h3> HELP <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>Help</code> button takes you to this documentation.</p> <a name="vi"></a> <h3> VIEW <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>View</code> button opens the current File in the current Folder using the default application. You may be able to see notes being written to the file, depending on the application. BBEdit, for example, updates the window of an open file when its contents on the disk change.</p> <a name="qu"></a> <h3> QUIT <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>Qit</code> button quits Napkin without saving.</p> <a name="sa"></a> <h3> SAVE <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>Save</code> button writes or appends the current text with the optional Slug and timestamp to the current File in the current Folder.</p> <a name="cn"></a> <p> &nbsp;</p> <h3> CONCLUSION <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Text mode makes it easy to build a running commentary alongside an independent text with automatic timestamps between sections. It can also take dictation or just save copy dragged from the original source.</p> <p align="right"> <i>-- <a href="mailto:mrpasini@gmail.com">Mike Pasini</a></i></p> <div class="right submit"> <hr width="99%"> <button class="button" name="OK" type="button" onclick="window.KeyboardMaestro.Submit('OK')">OK</button> </div> <br> <blockquote> </body> </html> TimeOutAbortsMacro UseText ConditionType Matches TestValue Help ActionListDisclosed Actions ActionColor Teal FileType File IsDisclosed Location %Variable%napkinTextDir% MacroActionType PromptForFile NotifyOnFailure Parameter StopOnFailure Variable napkinTextFile WindowTitle Choose a Text File: ActionColor Teal FileName napkinTextFile IsDisclosed MacroActionType SplitPath Parent napkinTextDir Path %Variable%napkinTextFile% ActionColor Teal IsDisclosed MacroActionType SetVariableToText Text %napkinTextDir%/ Variable napkinTextDir ConditionType Matches TestValue napkinPickFile ActionListDisclosed Actions ActionColor Teal ActionName Set Text mode Dir according to “napkinKMversion” CaseEntries Actions ActionColor Magenta FileType Folder Location %napkinTextDir% MacroActionType PromptForFile NotifyOnFailure Parameter StopOnFailure Variable napkinTextDir WindowTitle Choose a Text mode Folder: ConditionType StartsWith TestValue 9 Actions ActionColor Magenta DisplayKind Variable HonourFailureSettings IncludeStdErr MacroActionType ExecuteAppleScript Path Text tell application "Keyboard Maestro Engine" set myDir to getvariable "napkinTextDir" end tell tell application (path to frontmost application as text) to set thePath to choose file with prompt "Choose a Text mode Folder:" default location myDir set thePath to the POSIX path of thePath TimeOutAbortsMacro TrimResults TrimResultsNew UseText Variable napkinTextDir ConditionType StartsWith TestValue 8 MacroActionType Switch Source Variable Variable napkinKMversion ConditionType Matches TestValue napkinPickDir ActionListDisclosed Actions ActionColor Teal FileName napkinTextFile MacroActionType SplitPath Parent napkinTextDir Path %Variable%napkinPickFav% ActionColor Teal IsDisclosed MacroActionType SetVariableToText Text %napkinDir%/ Variable napkinDir ConditionType Matches TestValue napkinPickFav ActionListDisclosed Actions ActionColor Teal MacroActionType SetVariableToText Text %Variable%napkinPickSlug% Variable napkinSlug ConditionType Matches TestValue napkinPickSlug ActionListDisclosed Actions ActionColor Teal Asynchronously IsDisclosed MacroActionType ExecuteMacro MacroUID 8DA18B2F-55AC-4451-9639-32D5FB329CFF TimeOutAbortsMacro UseParameter ConditionType Matches TestValue napkinSearch ActionListDisclosed Actions ActionColor Magenta Conditions ConditionList ConditionType Variable Variable napkinTextBackup VariableConditionType IsEmpty VariableValue value ConditionListMatch All ElseActions ActionColor Teal IsDisclosed MacroActionType SetVariableToText Text %Variable%napkinTextBackup% Variable napkinText MacroActionType IfThenElse ThenActions ActionColor Teal IsDisclosed MacroActionType Notification SoundName Subtitle Restoring... Text Nothing to restore, sorry. Title %ExecutingMacro% TimeOutAbortsMacro ConditionType Matches TestValue Restore ActionListDisclosed Actions ActionColor Teal ActionName If there's unsaved text, back it up Conditions ConditionList ConditionType Variable Variable napkinText VariableConditionType IsNotEmpty VariableValue value ConditionListMatch All ElseActionListDisclosed ElseActions IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Magenta IsDisclosed MacroActionType SetVariableToText Text %Variable%napkinText% Variable napkinTextBackup TimeOutAbortsMacro ActionColor Aqua IsDisclosed MacroActionType SetVariableToText Text draw Variable napkinMode ConditionType Matches TestValue napkinMode ActionListDisclosed Actions ActionColor Magenta IsDefaultApplication MacroActionType Open1File Path %Variable%napkinTextDir%/%Variable%napkinTextFile% ConditionType Matches TestValue View Actions ActionColor Magenta ActionName If There's a Slug add it to the Header Conditions ConditionList ConditionType Variable Variable napkinSlug VariableConditionType IsNotEmpty VariableValue value ConditionListMatch All ElseActionListDisclosed ElseActions IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Teal MacroActionType SetVariableToText Text ——— %Variable%napkinSlug% • %ICUDateTimeFor%NOW() %d MMMM yyyy • hh:mm a zzz% ——— Variable napkinHeader TimeOutAbortsMacro Action TrimWhitespace ActionColor Magenta IsDisclosed MacroActionType Filter Source Variable Variable napkinText ActionColor Magenta IsDisclosed MacroActionType SetVariableToText Text %Variable%napkinHeader%\n\n%Variable%Local_Text%%Variable%napkinText%\n\n Variable napkinText ActionColor Magenta ActionName If There's Text Append/Write It Conditions ConditionList ConditionType Path Path %napkinTextDir%/%napkinTextFile% PathConditionType FileExists ConditionListMatch All ElseActions ActionColor Teal Append Destination %napkinTextDir%/%napkinTextFile% Encoding UTF8 Format PlainText Format2 PlainText MacroActionType WriteFile Source Variable Variable napkinText IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Teal Append Destination %napkinTextDir%/%napkinTextFile% Encoding UTF8 Format PlainText Format2 PlainText MacroActionType WriteFile Source Text Text %Variable%napkinText% TimeOutAbortsMacro ActionColor Magenta IsDisclosed MacroActionType SetVariableToText Text Variable napkinText ConditionType Matches TestValue Save IsDisclosed MacroActionType Switch Source Variable Variable HTML Result Button ConditionType Contains TestValue text Actions ActionColor Purple ActionName Set Defaults Actions ActionColor Magenta ActionName If no image file name... Conditions ConditionList ConditionType Variable Variable napkinImageFile VariableConditionType DoesNotExist VariableValue value ConditionType Variable Variable napkinImageFile VariableConditionType IsEmpty VariableValue value ConditionListMatch Any ElseActions IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Teal MacroActionType SetVariableToText Text Variable napkinImageFile TimeOutAbortsMacro ActionColor Magenta ActionName If no image directory... Conditions ConditionList ConditionType Variable Variable napkinImageDir VariableConditionType DoesNotExist VariableValue value ConditionType Variable Variable napkinImageDir VariableConditionType IsEmpty VariableValue value ConditionListMatch Any ElseActions IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Teal MacroActionType SetVariableToText Text Variable napkinImageDir TimeOutAbortsMacro ActionColor Magenta ActionName If both no image file and directory are blank... Conditions ConditionList ConditionType Variable Variable napkinImageFile VariableConditionType IsEmpty VariableValue value ConditionType Variable Variable napkinImageDir VariableConditionType IsEmpty VariableValue value ConditionListMatch Any ElseActionListDisclosed ElseActions IsDisclosed MacroActionType IfThenElse ThenActionListDisclosed ThenActions ActionColor Teal MacroActionType SetVariableToText Text No Active File Variable napkinImageFileStatus TimeOutAbortsMacro IsDisclosed MacroActionType Group TimeOutAbortsMacro ActionColor Purple ActionName Custom Floating HTML Prompt: Draw Mode Form Floating IsDisclosed MacroActionType CustomPrompt Text <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>N A P K I N</title> <script> /* https://github.com/jakubfiala/atrament.js */ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.atrament=e():t.atrament=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";t.exports=n(2)},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function o(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e,n,i){return new u(t,e,n,i)}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),c=n(3),h=i(c),u=function(){function t(e,n,i,o){var r=this;if(s(this,t),!document)throw new Error("no DOM found");if(e instanceof window.Node&&"CANVAS"===e.tagName)this.canvas=e;else{if("string"!=typeof e)throw new Error("can't look for canvas based on '"+e+"'");this.canvas=document.querySelector(e)}if(!this.canvas)throw new Error("canvas not found");this.canvas.width=n||this.canvas.width,this.canvas.height=i||this.canvas.height,this.canvas.style.cursor="crosshair",this.mouse=new h.default;var a=function(t){t.cancelable&&t.preventDefault();var e=r.canvas.getBoundingClientRect(),n=t.changedTouches&&t.changedTouches[0]||t,i=n.offsetX,o=n.offsetY;"undefined"==typeof i&&(i=n.clientX-e.left),"undefined"==typeof o&&(o=n.clientY-e.top),r.mouse.down?(r.draw(i,o),r._dirty||i===r.mouse.x&&o===r.mouse.y||(r._dirty=!0,r.fireDirty())):(r.mouse.x=i,r.mouse.y=o)},c=function(t){return t.cancelable&&t.preventDefault(),a(t),"fill"===r._mode?void r.fill():(r.mouse.px=r.mouse.x,r.mouse.py=r.mouse.y,r.mouse.down=!0,r.context.beginPath(),void r.context.moveTo(r.mouse.px,r.mouse.py))},u=function(){r.mouse.down=!1,r.context.closePath()};this.canvas.addEventListener("mousemove",a),this.canvas.addEventListener("mousedown",c),document.addEventListener("mouseup",u),this.canvas.addEventListener("touchstart",c),this.canvas.addEventListener("touchend",u),this.canvas.addEventListener("touchmove",a),this.destroy=function(){r.clear(),r.canvas.removeEventListener("mousemove",a),r.canvas.removeEventListener("mousedown",c),document.removeEventListener("mouseup",u),r.canvas.removeEventListener("touchstart",c),r.canvas.removeEventListener("touchend",u),r.canvas.removeEventListener("touchmove",a)},this.context=this.canvas.getContext("2d"),this.context.globalCompositeOperation="source-over",this.context.globalAlpha=1,this.context.strokeStyle=o||"rgba(0,0,0,1)",this.context.lineCap="round",this.context.lineJoin="round",this.context.translate(.5,.5),this._filling=!1,this._fillStack=[],this.SMOOTHING_INIT=.85,this.WEIGHT_SPREAD=10,this._smoothing=this.SMOOTHING_INIT,this._maxWeight=12,this._thickness=2,this._targetThickness=2,this._weight=2,this._mode="draw",this._adaptive=!0}return a(t,[{key:"draw",value:function(e,n){var i=this.mouse,o=this.context,s=t.lineDistance(e,n,i.px,i.py),r=Math.min(.87,this._smoothing+(s-60)/3e3);i.x=e-(e-i.px)*r,i.y=n-(n-i.py)*r;var a=t.lineDistance(i.x,i.y,i.px,i.py);this._adaptive?(this._targetThickness=(a-1)/49*(this._maxWeight-this._weight)+this._weight,this._thickness>this._targetThickness?this._thickness-=.5:this._thickness<this._targetThickness&&(this._thickness+=.5),o.lineWidth=this._thickness):o.lineWidth=this._weight,o.quadraticCurveTo(i.px,i.py,i.x,i.y),o.stroke(),i.px=i.x,i.py=i.y}},{key:"fireDirty",value:function(){var t=document.createEvent("Event");t.initEvent("dirty",!0,!0),this.canvas.dispatchEvent(t)}},{key:"clear",value:function(){this.dirty&&(this._dirty=!1,this.fireDirty(),"destination-out"===this.context.globalCompositeOperation?(this.mode="draw",this.context.clearRect(-10,-10,this.canvas.width+20,this.canvas.height+20),this.mode="erase"):this.context.clearRect(-10,-10,this.canvas.width+20,this.canvas.height+20))}},{key:"toImage",value:function(){return this.canvas.toDataURL()}},{key:"fill",value:function(){var t=this,e=this.mouse,n=this.context,i=Array.prototype.slice.call(n.getImageData(e.x,e.y,1,1).data,0);this._filling?this._fillStack.push([e.x,e.y,i]):(this.canvas.style.cursor="progress",this._filling=!0,setTimeout(function(){t._floodFill(e.x,e.y,i)},100))}},{key:"_floodFill",value:function(e,n,i){var s=this,r=this.context,a=Math.floor(e),c=Math.floor(n),h=r.canvas.width,u=r.canvas.height,f=[[a,c]],l=t.hexToRgb(this.color),p=r.getImageData(0,0,r.canvas.width,r.canvas.height),y=Math.min(10*r.globalAlpha*255,255),d=t.colorPixel.apply(t,[p.data].concat(o(l),[i,y])),v=t.matchColor.apply(t,[p.data].concat(o(i))),m=t.matchColor.apply(t,[p.data].concat([].concat(o(l),[255])));if(m(4*(c*r.canvas.width+a)))return this._filling=!1,void setTimeout(function(){s.canvas.style.cursor="crosshair"},100);for(;f.length;){for(var g=f.pop(),_=g[0],x=g[1],w=4*(x*h+_);x-- >=0&&v(w);)w-=4*h;w+=4*h,++x;for(var k=!1,b=!1;x++<u-1&&v(w);)d(w),_>0&&(v(w-4)?k||(f.push([_-1,x]),k=!0):k&&(k=!1)),_<h-1&&(v(w+4)?b||(f.push([_+1,x]),b=!0):b&&(b=!1)),w+=4*h}r.putImageData(p,0,0),this._fillStack.length?this._floodFill.apply(this,o(this._fillStack.shift())):(this._filling=!1,setTimeout(function(){s.canvas.style.cursor="crosshair"},100))}},{key:"color",get:function(){return this.context.strokeStyle},set:function(t){if("string"!=typeof t)throw new Error("wrong argument type");this.context.strokeStyle=t}},{key:"weight",get:function(){return this._weight},set:function(t){if("number"!=typeof t)throw new Error("wrong argument type");this._weight=t,this._thickness=t,this._targetThickness=t,this._maxWeight=t+this.WEIGHT_SPREAD}},{key:"adaptiveStroke",get:function(){return this._adaptive},set:function(t){this._adaptive=!!t}},{key:"mode",get:function(){return this._mode},set:function(t){if("string"!=typeof t)throw new Error("wrong argument type");switch(t){case"erase":this._mode="erase",this.context.globalCompositeOperation="destination-out";break;case"fill":this._mode="fill",this.context.globalCompositeOperation="source-over";break;default:this._mode="draw",this.context.globalCompositeOperation="source-over"}}},{key:"dirty",get:function(){return!!this._dirty}},{key:"smoothing",get:function(){return this._smoothing===this.SMOOTHING_INIT},set:function(t){if("boolean"!=typeof t)throw new Error("wrong argument type");this._smoothing=t?this.SMOOTHING_INIT:0}},{key:"opacity",set:function(t){if("number"!=typeof t)throw new Error("wrong argument type");t>=1?this.context.globalAlpha=1:this.context.globalAlpha=t/10}}],[{key:"lineDistance",value:function(t,e,n,i){var o=Math.pow(n-t,2),s=Math.pow(i-e,2);return Math.sqrt(o+s)}},{key:"hexToRgb",value:function(t){var e=t.match(/^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}},{key:"matchColor",value:function(t,e,n,i,o){return function(s){var r=t[s],a=t[s+1],c=t[s+2],h=t[s+3];return r===e&&a===n&&c===i&&h===o}}},{key:"colorPixel",value:function(e,n,i,s,r,a){var c=t.matchColor.apply(t,[e].concat(o(r)));return function(t){e[t]=n,e[t+1]=i,e[t+2]=s,e[t+3]=a,c(t+4)||(e[t+4]=.01*e[t+4]+.99*n,e[t+4+1]=.01*e[t+4+1]+.99*i,e[t+4+2]=.01*e[t+4+2]+.99*s,e[t+4+3]=.01*e[t+4+3]+.99*a),c(t-4)||(e[t-4]=.01*e[t-4]+.99*n,e[t-4+1]=.01*e[t-4+1]+.99*i,e[t-4+2]=.01*e[t-4+2]+.99*s,e[t-4+3]=.01*e[t-4+3]+.99*a)}}}]),t}();t.exports=r,t.exports.Atrament=u},function(t,e){"use strict";function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(){function t(e,n){o(this,t),this._x=e,this._y=n}return s(t,[{key:"set",value:function(t,e){this._x=t,this._y=e}},{key:"x",get:function(){return this._x},set:function(t){this._x=t}},{key:"y",get:function(){return this._y},set:function(t){this._y=t}}]),t}(),a=function(t){function e(){o(this,e);var t=n(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,0,0));return t._down=!1,t._px=0,t._py=0,t}return i(e,t),s(e,[{key:"down",get:function(){return this._down},set:function(t){this._down=t}},{key:"x",get:function(){return this._x},set:function(t){this._x=t}},{key:"y",get:function(){return this._y},set:function(t){this._y=t}},{key:"px",get:function(){return this._px},set:function(t){this._px=t}},{key:"py",get:function(){return this._py},set:function(t){this._py=t}}]),e}(r);e.default=a}])}); </script> <script> /* jscolor 2.05 */ "use strict";if(!window.jscolor){window.jscolor=(function(){var jsc={register:function(){jsc.attachDOMReadyEvent(jsc.init);jsc.attachEvent(document,'mousedown',jsc.onDocumentMouseDown);jsc.attachEvent(document,'touchstart',jsc.onDocumentTouchStart);jsc.attachEvent(window,'resize',jsc.onWindowResize);},init:function(){if(jsc.jscolor.lookupClass){jsc.jscolor.installByClassName(jsc.jscolor.lookupClass);}},tryInstallOnElements:function(elms,className){var matchClass=new RegExp('(^|\\s)('+className+')(\\s*(\\{[^}]*\\})|\\s|$)','i');for(var i=0;i<elms.length;i+=1){if(elms[i].type!==undefined&&elms[i].type.toLowerCase()=='color'){if(jsc.isColorAttrSupported){continue;}} var m;if(!elms[i].jscolor&&elms[i].className&&(m=elms[i].className.match(matchClass))){var targetElm=elms[i];var optsStr=null;var dataOptions=jsc.getDataAttr(targetElm,'jscolor');if(dataOptions!==null){optsStr=dataOptions;}else if(m[4]){optsStr=m[4];} var opts={};if(optsStr){try{opts=(new Function('return ('+optsStr+')'))();}catch(eParseError){jsc.warn('Error parsing jscolor options: '+eParseError+':\n'+optsStr);}} targetElm.jscolor=new jsc.jscolor(targetElm,opts);}}},isColorAttrSupported:(function(){var elm=document.createElement('input');if(elm.setAttribute){elm.setAttribute('type','color');if(elm.type.toLowerCase()=='color'){return true;}} return false;})(),isCanvasSupported:(function(){var elm=document.createElement('canvas');return!!(elm.getContext&&elm.getContext('2d'));})(),fetchElement:function(mixed){return typeof mixed==='string'?document.getElementById(mixed):mixed;},isElementType:function(elm,type){return elm.nodeName.toLowerCase()===type.toLowerCase();},getDataAttr:function(el,name){var attrName='data-'+name;var attrValue=el.getAttribute(attrName);if(attrValue!==null){return attrValue;} return null;},attachEvent:function(el,evnt,func){if(el.addEventListener){el.addEventListener(evnt,func,false);}else if(el.attachEvent){el.attachEvent('on'+evnt,func);}},detachEvent:function(el,evnt,func){if(el.removeEventListener){el.removeEventListener(evnt,func,false);}else if(el.detachEvent){el.detachEvent('on'+evnt,func);}},_attachedGroupEvents:{},attachGroupEvent:function(groupName,el,evnt,func){if(!jsc._attachedGroupEvents.hasOwnProperty(groupName)){jsc._attachedGroupEvents[groupName]=[];} jsc._attachedGroupEvents[groupName].push([el,evnt,func]);jsc.attachEvent(el,evnt,func);},detachGroupEvents:function(groupName){if(jsc._attachedGroupEvents.hasOwnProperty(groupName)){for(var i=0;i<jsc._attachedGroupEvents[groupName].length;i+=1){var evt=jsc._attachedGroupEvents[groupName][i];jsc.detachEvent(evt[0],evt[1],evt[2]);} delete jsc._attachedGroupEvents[groupName];}},attachDOMReadyEvent:function(func){var fired=false;var fireOnce=function(){if(!fired){fired=true;func();}};if(document.readyState==='complete'){setTimeout(fireOnce,1);return;} if(document.addEventListener){document.addEventListener('DOMContentLoaded',fireOnce,false);window.addEventListener('load',fireOnce,false);}else if(document.attachEvent){document.attachEvent('onreadystatechange',function(){if(document.readyState==='complete'){document.detachEvent('onreadystatechange',arguments.callee);fireOnce();}}) window.attachEvent('onload',fireOnce);if(document.documentElement.doScroll&&window==window.top){var tryScroll=function(){if(!document.body){return;} try{document.documentElement.doScroll('left');fireOnce();}catch(e){setTimeout(tryScroll,1);}};tryScroll();}}},warn:function(msg){if(window.console&&window.console.warn){window.console.warn(msg);}},preventDefault:function(e){if(e.preventDefault){e.preventDefault();} e.returnValue=false;},captureTarget:function(target){if(target.setCapture){jsc._capturedTarget=target;jsc._capturedTarget.setCapture();}},releaseTarget:function(){if(jsc._capturedTarget){jsc._capturedTarget.releaseCapture();jsc._capturedTarget=null;}},fireEvent:function(el,evnt){if(!el){return;} if(document.createEvent){var ev=document.createEvent('HTMLEvents');ev.initEvent(evnt,true,true);el.dispatchEvent(ev);}else if(document.createEventObject){var ev=document.createEventObject();el.fireEvent('on'+evnt,ev);}else if(el['on'+evnt]){el['on'+evnt]();}},classNameToList:function(className){return className.replace(/^\s+|\s+$/g,'').split(/\s+/);},hasClass:function(elm,className){if(!className){return false;} return-1!=(' '+elm.className.replace(/\s+/g,' ')+' ').indexOf(' '+className+' ');},setClass:function(elm,className){var classList=jsc.classNameToList(className);for(var i=0;i<classList.length;i+=1){if(!jsc.hasClass(elm,classList[i])){elm.className+=(elm.className?' ':'')+classList[i];}}},unsetClass:function(elm,className){var classList=jsc.classNameToList(className);for(var i=0;i<classList.length;i+=1){var repl=new RegExp('^\\s*'+classList[i]+'\\s*|'+ '\\s*'+classList[i]+'\\s*$|'+ '\\s+'+classList[i]+'(\\s+)','g');elm.className=elm.className.replace(repl,'$1');}},getStyle:function(elm){return window.getComputedStyle?window.getComputedStyle(elm):elm.currentStyle;},setStyle:(function(){var helper=document.createElement('div');var getSupportedProp=function(names){for(var i=0;i<names.length;i+=1){if(names[i]in helper.style){return names[i];}}};var props={borderRadius:getSupportedProp(['borderRadius','MozBorderRadius','webkitBorderRadius']),boxShadow:getSupportedProp(['boxShadow','MozBoxShadow','webkitBoxShadow'])};return function(elm,prop,value){switch(prop.toLowerCase()){case'opacity':var alphaOpacity=Math.round(parseFloat(value)*100);elm.style.opacity=value;elm.style.filter='alpha(opacity='+alphaOpacity+')';break;default:elm.style[props[prop]]=value;break;}};})(),setBorderRadius:function(elm,value){jsc.setStyle(elm,'borderRadius',value||'0');},setBoxShadow:function(elm,value){jsc.setStyle(elm,'boxShadow',value||'none');},getElementPos:function(e,relativeToViewport){var x=0,y=0;var rect=e.getBoundingClientRect();x=rect.left;y=rect.top;if(!relativeToViewport){var viewPos=jsc.getViewPos();x+=viewPos[0];y+=viewPos[1];} return[x,y];},getElementSize:function(e){return[e.offsetWidth,e.offsetHeight];},getAbsPointerPos:function(e){if(!e){e=window.event;} var x=0,y=0;if(typeof e.changedTouches!=='undefined'&&e.changedTouches.length){x=e.changedTouches[0].clientX;y=e.changedTouches[0].clientY;}else if(typeof e.clientX==='number'){x=e.clientX;y=e.clientY;} return{x:x,y:y};},getRelPointerPos:function(e){if(!e){e=window.event;} var target=e.target||e.srcElement;var targetRect=target.getBoundingClientRect();var x=0,y=0;var clientX=0,clientY=0;if(typeof e.changedTouches!=='undefined'&&e.changedTouches.length){clientX=e.changedTouches[0].clientX;clientY=e.changedTouches[0].clientY;}else if(typeof e.clientX==='number'){clientX=e.clientX;clientY=e.clientY;} x=clientX-targetRect.left;y=clientY-targetRect.top;return{x:x,y:y};},getViewPos:function(){var doc=document.documentElement;return[(window.pageXOffset||doc.scrollLeft)-(doc.clientLeft||0),(window.pageYOffset||doc.scrollTop)-(doc.clientTop||0)];},getViewSize:function(){var doc=document.documentElement;return[(window.innerWidth||doc.clientWidth),(window.innerHeight||doc.clientHeight),];},redrawPosition:function(){if(jsc.picker&&jsc.picker.owner){var thisObj=jsc.picker.owner;var tp,vp;if(thisObj.fixed){tp=jsc.getElementPos(thisObj.targetElement,true);vp=[0,0];}else{tp=jsc.getElementPos(thisObj.targetElement);vp=jsc.getViewPos();} var ts=jsc.getElementSize(thisObj.targetElement);var vs=jsc.getViewSize();var ps=jsc.getPickerOuterDims(thisObj);var a,b,c;switch(thisObj.position.toLowerCase()){case'left':a=1;b=0;c=-1;break;case'right':a=1;b=0;c=1;break;case'top':a=0;b=1;c=-1;break;default:a=0;b=1;c=1;break;} var l=(ts[b]+ps[b])/2;if(!thisObj.smartPosition){var pp=[tp[a],tp[b]+ts[b]-l+l*c];}else{var pp=[-vp[a]+tp[a]+ps[a]>vs[a]?(-vp[a]+tp[a]+ts[a]/2>vs[a]/2&&tp[a]+ts[a]-ps[a]>=0?tp[a]+ts[a]-ps[a]:tp[a]):tp[a],-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c>vs[b]?(-vp[b]+tp[b]+ts[b]/2>vs[b]/2&&tp[b]+ts[b]-l-l*c>=0?tp[b]+ts[b]-l-l*c:tp[b]+ts[b]-l+l*c):(tp[b]+ts[b]-l+l*c>=0?tp[b]+ts[b]-l+l*c:tp[b]+ts[b]-l-l*c)];} var x=pp[a];var y=pp[b];var positionValue=thisObj.fixed?'fixed':'absolute';var contractShadow=(pp[0]+ps[0]>tp[0]||pp[0]<tp[0]+ts[0])&&(pp[1]+ps[1]<tp[1]+ts[1]);jsc._drawPosition(thisObj,x,y,positionValue,contractShadow);}},_drawPosition:function(thisObj,x,y,positionValue,contractShadow){var vShadow=contractShadow?0:thisObj.shadowBlur;jsc.picker.wrap.style.position=positionValue;jsc.picker.wrap.style.left=x+'px';jsc.picker.wrap.style.top=y+'px';jsc.setBoxShadow(jsc.picker.boxS,thisObj.shadow?new jsc.BoxShadow(0,vShadow,thisObj.shadowBlur,0,thisObj.shadowColor):null);},getPickerDims:function(thisObj){var displaySlider=!!jsc.getSliderComponent(thisObj);var dims=[2*thisObj.insetWidth+2*thisObj.padding+thisObj.width+ (displaySlider?2*thisObj.insetWidth+jsc.getPadToSliderPadding(thisObj)+thisObj.sliderSize:0),2*thisObj.insetWidth+2*thisObj.padding+thisObj.height+ (thisObj.closable?2*thisObj.insetWidth+thisObj.padding+thisObj.buttonHeight:0)];return dims;},getPickerOuterDims:function(thisObj){var dims=jsc.getPickerDims(thisObj);return[dims[0]+2*thisObj.borderWidth,dims[1]+2*thisObj.borderWidth];},getPadToSliderPadding:function(thisObj){return Math.max(thisObj.padding,1.5*(2*thisObj.pointerBorderWidth+thisObj.pointerThickness));},getPadYComponent:function(thisObj){switch(thisObj.mode.charAt(1).toLowerCase()){case'v':return'v';break;} return's';},getSliderComponent:function(thisObj){if(thisObj.mode.length>2){switch(thisObj.mode.charAt(2).toLowerCase()){case's':return's';break;case'v':return'v';break;}} return null;},onDocumentMouseDown:function(e){if(!e){e=window.event;} var target=e.target||e.srcElement;if(target._jscLinkedInstance){if(target._jscLinkedInstance.showOnClick){target._jscLinkedInstance.show();}}else if(target._jscControlName){jsc.onControlPointerStart(e,target,target._jscControlName,'mouse');}else{if(jsc.picker&&jsc.picker.owner){jsc.picker.owner.hide();}}},onDocumentTouchStart:function(e){if(!e){e=window.event;} var target=e.target||e.srcElement;if(target._jscLinkedInstance){if(target._jscLinkedInstance.showOnClick){target._jscLinkedInstance.show();}}else if(target._jscControlName){jsc.onControlPointerStart(e,target,target._jscControlName,'touch');}else{if(jsc.picker&&jsc.picker.owner){jsc.picker.owner.hide();}}},onWindowResize:function(e){jsc.redrawPosition();},onParentScroll:function(e){if(jsc.picker&&jsc.picker.owner){jsc.picker.owner.hide();}},_pointerMoveEvent:{mouse:'mousemove',touch:'touchmove'},_pointerEndEvent:{mouse:'mouseup',touch:'touchend'},_pointerOrigin:null,_capturedTarget:null,onControlPointerStart:function(e,target,controlName,pointerType){var thisObj=target._jscInstance;jsc.preventDefault(e);jsc.captureTarget(target);var registerDragEvents=function(doc,offset){jsc.attachGroupEvent('drag',doc,jsc._pointerMoveEvent[pointerType],jsc.onDocumentPointerMove(e,target,controlName,pointerType,offset));jsc.attachGroupEvent('drag',doc,jsc._pointerEndEvent[pointerType],jsc.onDocumentPointerEnd(e,target,controlName,pointerType));};registerDragEvents(document,[0,0]);if(window.parent&&window.frameElement){var rect=window.frameElement.getBoundingClientRect();var ofs=[-rect.left,-rect.top];registerDragEvents(window.parent.window.document,ofs);} var abs=jsc.getAbsPointerPos(e);var rel=jsc.getRelPointerPos(e);jsc._pointerOrigin={x:abs.x-rel.x,y:abs.y-rel.y};switch(controlName){case'pad':switch(jsc.getSliderComponent(thisObj)){case's':if(thisObj.hsv[1]===0){thisObj.fromHSV(null,100,null);};break;case'v':if(thisObj.hsv[2]===0){thisObj.fromHSV(null,null,100);};break;} jsc.setPad(thisObj,e,0,0);break;case'sld':jsc.setSld(thisObj,e,0);break;} jsc.dispatchFineChange(thisObj);},onDocumentPointerMove:function(e,target,controlName,pointerType,offset){return function(e){var thisObj=target._jscInstance;switch(controlName){case'pad':if(!e){e=window.event;} jsc.setPad(thisObj,e,offset[0],offset[1]);jsc.dispatchFineChange(thisObj);break;case'sld':if(!e){e=window.event;} jsc.setSld(thisObj,e,offset[1]);jsc.dispatchFineChange(thisObj);break;}}},onDocumentPointerEnd:function(e,target,controlName,pointerType){return function(e){var thisObj=target._jscInstance;jsc.detachGroupEvents('drag');jsc.releaseTarget();jsc.dispatchChange(thisObj);};},dispatchChange:function(thisObj){if(thisObj.valueElement){if(jsc.isElementType(thisObj.valueElement,'input')){jsc.fireEvent(thisObj.valueElement,'change');}}},dispatchFineChange:function(thisObj){if(thisObj.onFineChange){var callback;if(typeof thisObj.onFineChange==='string'){callback=new Function(thisObj.onFineChange);}else{callback=thisObj.onFineChange;} callback.call(thisObj);}},setPad:function(thisObj,e,ofsX,ofsY){var pointerAbs=jsc.getAbsPointerPos(e);var x=ofsX+pointerAbs.x-jsc._pointerOrigin.x-thisObj.padding-thisObj.insetWidth;var y=ofsY+pointerAbs.y-jsc._pointerOrigin.y-thisObj.padding-thisObj.insetWidth;var xVal=x*(360/(thisObj.width-1));var yVal=100-(y*(100/(thisObj.height-1)));switch(jsc.getPadYComponent(thisObj)){case's':thisObj.fromHSV(xVal,yVal,null,jsc.leaveSld);break;case'v':thisObj.fromHSV(xVal,null,yVal,jsc.leaveSld);break;}},setSld:function(thisObj,e,ofsY){var pointerAbs=jsc.getAbsPointerPos(e);var y=ofsY+pointerAbs.y-jsc._pointerOrigin.y-thisObj.padding-thisObj.insetWidth;var yVal=100-(y*(100/(thisObj.height-1)));switch(jsc.getSliderComponent(thisObj)){case's':thisObj.fromHSV(null,yVal,null,jsc.leavePad);break;case'v':thisObj.fromHSV(null,null,yVal,jsc.leavePad);break;}},_vmlNS:'jsc_vml_',_vmlCSS:'jsc_vml_css_',_vmlReady:false,initVML:function(){if(!jsc._vmlReady){var doc=document;if(!doc.namespaces[jsc._vmlNS]){doc.namespaces.add(jsc._vmlNS,'urn:schemas-microsoft-com:vml');} if(!doc.styleSheets[jsc._vmlCSS]){var tags=['shape','shapetype','group','background','path','formulas','handles','fill','stroke','shadow','textbox','textpath','imagedata','line','polyline','curve','rect','roundrect','oval','arc','image'];var ss=doc.createStyleSheet();ss.owningElement.id=jsc._vmlCSS;for(var i=0;i<tags.length;i+=1){ss.addRule(jsc._vmlNS+'\\:'+tags[i],'behavior:url(#default#VML);');}} jsc._vmlReady=true;}},createPalette:function(){var paletteObj={elm:null,draw:null};if(jsc.isCanvasSupported){var canvas=document.createElement('canvas');var ctx=canvas.getContext('2d');var drawFunc=function(width,height,type){canvas.width=width;canvas.height=height;ctx.clearRect(0,0,canvas.width,canvas.height);var hGrad=ctx.createLinearGradient(0,0,canvas.width,0);hGrad.addColorStop(0/6,'#F00');hGrad.addColorStop(1/6,'#FF0');hGrad.addColorStop(2/6,'#0F0');hGrad.addColorStop(3/6,'#0FF');hGrad.addColorStop(4/6,'#00F');hGrad.addColorStop(5/6,'#F0F');hGrad.addColorStop(6/6,'#F00');ctx.fillStyle=hGrad;ctx.fillRect(0,0,canvas.width,canvas.height);var vGrad=ctx.createLinearGradient(0,0,0,canvas.height);switch(type.toLowerCase()){case's':vGrad.addColorStop(0,'rgba(255,255,255,0)');vGrad.addColorStop(1,'rgba(255,255,255,1)');break;case'v':vGrad.addColorStop(0,'rgba(0,0,0,0)');vGrad.addColorStop(1,'rgba(0,0,0,1)');break;} ctx.fillStyle=vGrad;ctx.fillRect(0,0,canvas.width,canvas.height);};paletteObj.elm=canvas;paletteObj.draw=drawFunc;}else{jsc.initVML();var vmlContainer=document.createElement('div');vmlContainer.style.position='relative';vmlContainer.style.overflow='hidden';var hGrad=document.createElement(jsc._vmlNS+':fill');hGrad.type='gradient';hGrad.method='linear';hGrad.angle='90';hGrad.colors='16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0' var hRect=document.createElement(jsc._vmlNS+':rect');hRect.style.position='absolute';hRect.style.left=-1+'px';hRect.style.top=-1+'px';hRect.stroked=false;hRect.appendChild(hGrad);vmlContainer.appendChild(hRect);var vGrad=document.createElement(jsc._vmlNS+':fill');vGrad.type='gradient';vGrad.method='linear';vGrad.angle='180';vGrad.opacity='0';var vRect=document.createElement(jsc._vmlNS+':rect');vRect.style.position='absolute';vRect.style.left=-1+'px';vRect.style.top=-1+'px';vRect.stroked=false;vRect.appendChild(vGrad);vmlContainer.appendChild(vRect);var drawFunc=function(width,height,type){vmlContainer.style.width=width+'px';vmlContainer.style.height=height+'px';hRect.style.width=vRect.style.width=(width+1)+'px';hRect.style.height=vRect.style.height=(height+1)+'px';hGrad.color='#F00';hGrad.color2='#F00';switch(type.toLowerCase()){case's':vGrad.color=vGrad.color2='#FFF';break;case'v':vGrad.color=vGrad.color2='#000';break;}};paletteObj.elm=vmlContainer;paletteObj.draw=drawFunc;} return paletteObj;},createSliderGradient:function(){var sliderObj={elm:null,draw:null};if(jsc.isCanvasSupported){var canvas=document.createElement('canvas');var ctx=canvas.getContext('2d');var drawFunc=function(width,height,color1,color2){canvas.width=width;canvas.height=height;ctx.clearRect(0,0,canvas.width,canvas.height);var grad=ctx.createLinearGradient(0,0,0,canvas.height);grad.addColorStop(0,color1);grad.addColorStop(1,color2);ctx.fillStyle=grad;ctx.fillRect(0,0,canvas.width,canvas.height);};sliderObj.elm=canvas;sliderObj.draw=drawFunc;}else{jsc.initVML();var vmlContainer=document.createElement('div');vmlContainer.style.position='relative';vmlContainer.style.overflow='hidden';var grad=document.createElement(jsc._vmlNS+':fill');grad.type='gradient';grad.method='linear';grad.angle='180';var rect=document.createElement(jsc._vmlNS+':rect');rect.style.position='absolute';rect.style.left=-1+'px';rect.style.top=-1+'px';rect.stroked=false;rect.appendChild(grad);vmlContainer.appendChild(rect);var drawFunc=function(width,height,color1,color2){vmlContainer.style.width=width+'px';vmlContainer.style.height=height+'px';rect.style.width=(width+1)+'px';rect.style.height=(height+1)+'px';grad.color=color1;grad.color2=color2;};sliderObj.elm=vmlContainer;sliderObj.draw=drawFunc;} return sliderObj;},leaveValue:1<<0,leaveStyle:1<<1,leavePad:1<<2,leaveSld:1<<3,BoxShadow:(function(){var BoxShadow=function(hShadow,vShadow,blur,spread,color,inset){this.hShadow=hShadow;this.vShadow=vShadow;this.blur=blur;this.spread=spread;this.color=color;this.inset=!!inset;};BoxShadow.prototype.toString=function(){var vals=[Math.round(this.hShadow)+'px',Math.round(this.vShadow)+'px',Math.round(this.blur)+'px',Math.round(this.spread)+'px',this.color];if(this.inset){vals.push('inset');} return vals.join(' ');};return BoxShadow;})(),jscolor:function(targetElement,options){this.value=null;this.valueElement=targetElement;this.styleElement=targetElement;this.required=true;this.refine=true;this.hash=false;this.hidetext=false;this.uppercase=true;this.onFineChange=null;this.activeClass='jscolor-active';this.overwriteImportant=false;this.minS=0;this.maxS=100;this.minV=0;this.maxV=100;this.hsv=[0,0,100];this.rgb=[255,255,255];this.width=181;this.height=101;this.showOnClick=true;this.mode='HSV';this.position='bottom';this.smartPosition=true;this.sliderSize=16;this.crossSize=8;this.closable=false;this.closeText='Close';this.buttonColor='#000000';this.buttonHeight=18;this.padding=12;this.backgroundColor='#FFFFFF';this.borderWidth=1;this.borderColor='#BBBBBB';this.borderRadius=8;this.insetWidth=1;this.insetColor='#BBBBBB';this.shadow=true;this.shadowBlur=15;this.shadowColor='rgba(0,0,0,0.2)';this.pointerColor='#4C4C4C';this.pointerBorderColor='#FFFFFF';this.pointerBorderWidth=1;this.pointerThickness=2;this.zIndex=1000;this.container=null;for(var opt in options){if(options.hasOwnProperty(opt)){this[opt]=options[opt];}} this.hide=function(){if(isPickerOwner()){detachPicker();}};this.show=function(){drawPicker();};this.redraw=function(){if(isPickerOwner()){drawPicker();}};this.importColor=function(){if(!this.valueElement){this.exportColor();}else{if(jsc.isElementType(this.valueElement,'input')){if(!this.refine){if(!this.fromString(this.valueElement.value,jsc.leaveValue)){if(this.styleElement){this.styleElement.style.backgroundImage=this.styleElement._jscOrigStyle.backgroundImage;this.styleElement.style.backgroundColor=this.styleElement._jscOrigStyle.backgroundColor;this.styleElement.style.color=this.styleElement._jscOrigStyle.color;} this.exportColor(jsc.leaveValue|jsc.leaveStyle);}}else if(!this.required&&/^\s*$/.test(this.valueElement.value)){this.valueElement.value='';if(this.styleElement){this.styleElement.style.backgroundImage=this.styleElement._jscOrigStyle.backgroundImage;this.styleElement.style.backgroundColor=this.styleElement._jscOrigStyle.backgroundColor;this.styleElement.style.color=this.styleElement._jscOrigStyle.color;} this.exportColor(jsc.leaveValue|jsc.leaveStyle);}else if(this.fromString(this.valueElement.value)){}else{this.exportColor();}}else{this.exportColor();}}};this.exportColor=function(flags){if(!(flags&jsc.leaveValue)&&this.valueElement){var value=this.toString();if(this.uppercase){value=value.toUpperCase();} if(this.hash){value='#'+value;} if(jsc.isElementType(this.valueElement,'input')){this.valueElement.value=value;}else{this.valueElement.innerHTML=value;}} if(!(flags&jsc.leaveStyle)){if(this.styleElement){var bgColor='#'+this.toString();if(this.hidetext){var fgColor=bgColor;}else{var fgColor=this.isLight()?'#000':'#FFF';} this.styleElement.style.backgroundImage='none';this.styleElement.style.backgroundColor=bgColor;this.styleElement.style.color=fgColor;if(this.overwriteImportant){this.styleElement.setAttribute('style','background: '+bgColor+' !important; '+ 'color: '+fgColor+' !important;');}}} if(!(flags&jsc.leavePad)&&isPickerOwner()){redrawPad();} if(!(flags&jsc.leaveSld)&&isPickerOwner()){redrawSld();}};this.fromHSV=function(h,s,v,flags){if(h!==null){if(isNaN(h)){return false;} h=Math.max(0,Math.min(360,h));} if(s!==null){if(isNaN(s)){return false;} s=Math.max(0,Math.min(100,this.maxS,s),this.minS);} if(v!==null){if(isNaN(v)){return false;} v=Math.max(0,Math.min(100,this.maxV,v),this.minV);} this.rgb=HSV_RGB(h===null?this.hsv[0]:(this.hsv[0]=h),s===null?this.hsv[1]:(this.hsv[1]=s),v===null?this.hsv[2]:(this.hsv[2]=v));this.exportColor(flags);};this.fromRGB=function(r,g,b,flags){if(r!==null){if(isNaN(r)){return false;} r=Math.max(0,Math.min(255,r));} if(g!==null){if(isNaN(g)){return false;} g=Math.max(0,Math.min(255,g));} if(b!==null){if(isNaN(b)){return false;} b=Math.max(0,Math.min(255,b));} var hsv=RGB_HSV(r===null?this.rgb[0]:r,g===null?this.rgb[1]:g,b===null?this.rgb[2]:b);if(hsv[0]!==null){this.hsv[0]=Math.max(0,Math.min(360,hsv[0]));} if(hsv[2]!==0){this.hsv[1]=hsv[1]===null?null:Math.max(0,this.minS,Math.min(100,this.maxS,hsv[1]));} this.hsv[2]=hsv[2]===null?null:Math.max(0,this.minV,Math.min(100,this.maxV,hsv[2]));var rgb=HSV_RGB(this.hsv[0],this.hsv[1],this.hsv[2]);this.rgb[0]=rgb[0];this.rgb[1]=rgb[1];this.rgb[2]=rgb[2];this.exportColor(flags);};this.fromString=function(str,flags){var m;if(m=str.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i)){if(m[1].length===6){this.fromRGB(parseInt(m[1].substr(0,2),16),parseInt(m[1].substr(2,2),16),parseInt(m[1].substr(4,2),16),flags);}else{this.fromRGB(parseInt(m[1].charAt(0)+m[1].charAt(0),16),parseInt(m[1].charAt(1)+m[1].charAt(1),16),parseInt(m[1].charAt(2)+m[1].charAt(2),16),flags);} return true;}else if(m=str.match(/^\W*rgba?\(([^)]*)\)\W*$/i)){var params=m[1].split(',');var re=/^\s*(\d*)(\.\d+)?\s*$/;var mR,mG,mB;if(params.length>=3&&(mR=params[0].match(re))&&(mG=params[1].match(re))&&(mB=params[2].match(re))){var r=parseFloat((mR[1]||'0')+(mR[2]||''));var g=parseFloat((mG[1]||'0')+(mG[2]||''));var b=parseFloat((mB[1]||'0')+(mB[2]||''));this.fromRGB(r,g,b,flags);return true;}} return false;};this.toString=function(){return((0x100|Math.round(this.rgb[0])).toString(16).substr(1)+ (0x100|Math.round(this.rgb[1])).toString(16).substr(1)+ (0x100|Math.round(this.rgb[2])).toString(16).substr(1));};this.toHEXString=function(){return'#'+this.toString().toUpperCase();};this.toRGBString=function(){return('rgb('+ Math.round(this.rgb[0])+','+ Math.round(this.rgb[1])+','+ Math.round(this.rgb[2])+')');};this.isLight=function(){return(0.213*this.rgb[0]+ 0.715*this.rgb[1]+ 0.072*this.rgb[2]>255/2);};this._processParentElementsInDOM=function(){if(this._linkedElementsProcessed){return;} this._linkedElementsProcessed=true;var elm=this.targetElement;do{var currStyle=jsc.getStyle(elm);if(currStyle&&currStyle.position.toLowerCase()==='fixed'){this.fixed=true;} if(elm!==this.targetElement){if(!elm._jscEventsAttached){jsc.attachEvent(elm,'scroll',jsc.onParentScroll);elm._jscEventsAttached=true;}}}while((elm=elm.parentNode)&&!jsc.isElementType(elm,'body'));};function RGB_HSV(r,g,b){r/=255;g/=255;b/=255;var n=Math.min(Math.min(r,g),b);var v=Math.max(Math.max(r,g),b);var m=v-n;if(m===0){return[null,0,100*v];} var h=r===n?3+(b-g)/m:(g===n?5+(r-b)/m:1+(g-r)/m);return[60*(h===6?0:h),100*(m/v),100*v];} function HSV_RGB(h,s,v){var u=255*(v/100);if(h===null){return[u,u,u];} h/=60;s/=100;var i=Math.floor(h);var f=i%2?h-i:1-(h-i);var m=u*(1-s);var n=u*(1-s*f);switch(i){case 6:case 0:return[u,n,m];case 1:return[n,u,m];case 2:return[m,u,n];case 3:return[m,n,u];case 4:return[n,m,u];case 5:return[u,m,n];}} function detachPicker(){jsc.unsetClass(THIS.targetElement,THIS.activeClass);jsc.picker.wrap.parentNode.removeChild(jsc.picker.wrap);delete jsc.picker.owner;} function drawPicker(){THIS._processParentElementsInDOM();if(!jsc.picker){jsc.picker={owner:null,wrap:document.createElement('div'),box:document.createElement('div'),boxS:document.createElement('div'),boxB:document.createElement('div'),pad:document.createElement('div'),padB:document.createElement('div'),padM:document.createElement('div'),padPal:jsc.createPalette(),cross:document.createElement('div'),crossBY:document.createElement('div'),crossBX:document.createElement('div'),crossLY:document.createElement('div'),crossLX:document.createElement('div'),sld:document.createElement('div'),sldB:document.createElement('div'),sldM:document.createElement('div'),sldGrad:jsc.createSliderGradient(),sldPtrS:document.createElement('div'),sldPtrIB:document.createElement('div'),sldPtrMB:document.createElement('div'),sldPtrOB:document.createElement('div'),btn:document.createElement('div'),btnT:document.createElement('span')};jsc.picker.pad.appendChild(jsc.picker.padPal.elm);jsc.picker.padB.appendChild(jsc.picker.pad);jsc.picker.cross.appendChild(jsc.picker.crossBY);jsc.picker.cross.appendChild(jsc.picker.crossBX);jsc.picker.cross.appendChild(jsc.picker.crossLY);jsc.picker.cross.appendChild(jsc.picker.crossLX);jsc.picker.padB.appendChild(jsc.picker.cross);jsc.picker.box.appendChild(jsc.picker.padB);jsc.picker.box.appendChild(jsc.picker.padM);jsc.picker.sld.appendChild(jsc.picker.sldGrad.elm);jsc.picker.sldB.appendChild(jsc.picker.sld);jsc.picker.sldB.appendChild(jsc.picker.sldPtrOB);jsc.picker.sldPtrOB.appendChild(jsc.picker.sldPtrMB);jsc.picker.sldPtrMB.appendChild(jsc.picker.sldPtrIB);jsc.picker.sldPtrIB.appendChild(jsc.picker.sldPtrS);jsc.picker.box.appendChild(jsc.picker.sldB);jsc.picker.box.appendChild(jsc.picker.sldM);jsc.picker.btn.appendChild(jsc.picker.btnT);jsc.picker.box.appendChild(jsc.picker.btn);jsc.picker.boxB.appendChild(jsc.picker.box);jsc.picker.wrap.appendChild(jsc.picker.boxS);jsc.picker.wrap.appendChild(jsc.picker.boxB);} var p=jsc.picker;var displaySlider=!!jsc.getSliderComponent(THIS);var dims=jsc.getPickerDims(THIS);var crossOuterSize=(2*THIS.pointerBorderWidth+THIS.pointerThickness+2*THIS.crossSize);var padToSliderPadding=jsc.getPadToSliderPadding(THIS);var borderRadius=Math.min(THIS.borderRadius,Math.round(THIS.padding*Math.PI));var padCursor='crosshair';p.wrap.style.clear='both';p.wrap.style.width=(dims[0]+2*THIS.borderWidth)+'px';p.wrap.style.height=(dims[1]+2*THIS.borderWidth)+'px';p.wrap.style.zIndex=THIS.zIndex;p.box.style.width=dims[0]+'px';p.box.style.height=dims[1]+'px';p.boxS.style.position='absolute';p.boxS.style.left='0';p.boxS.style.top='0';p.boxS.style.width='100%';p.boxS.style.height='100%';jsc.setBorderRadius(p.boxS,borderRadius+'px');p.boxB.style.position='relative';p.boxB.style.border=THIS.borderWidth+'px solid';p.boxB.style.borderColor=THIS.borderColor;p.boxB.style.background=THIS.backgroundColor;jsc.setBorderRadius(p.boxB,borderRadius+'px');p.padM.style.background=p.sldM.style.background='#FFF';jsc.setStyle(p.padM,'opacity','0');jsc.setStyle(p.sldM,'opacity','0');p.pad.style.position='relative';p.pad.style.width=THIS.width+'px';p.pad.style.height=THIS.height+'px';p.padPal.draw(THIS.width,THIS.height,jsc.getPadYComponent(THIS));p.padB.style.position='absolute';p.padB.style.left=THIS.padding+'px';p.padB.style.top=THIS.padding+'px';p.padB.style.border=THIS.insetWidth+'px solid';p.padB.style.borderColor=THIS.insetColor;p.padM._jscInstance=THIS;p.padM._jscControlName='pad';p.padM.style.position='absolute';p.padM.style.left='0';p.padM.style.top='0';p.padM.style.width=(THIS.padding+2*THIS.insetWidth+THIS.width+padToSliderPadding/2)+'px';p.padM.style.height=dims[1]+'px';p.padM.style.cursor=padCursor;p.cross.style.position='absolute';p.cross.style.left=p.cross.style.top='0';p.cross.style.width=p.cross.style.height=crossOuterSize+'px';p.crossBY.style.position=p.crossBX.style.position='absolute';p.crossBY.style.background=p.crossBX.style.background=THIS.pointerBorderColor;p.crossBY.style.width=p.crossBX.style.height=(2*THIS.pointerBorderWidth+THIS.pointerThickness)+'px';p.crossBY.style.height=p.crossBX.style.width=crossOuterSize+'px';p.crossBY.style.left=p.crossBX.style.top=(Math.floor(crossOuterSize/2)-Math.floor(THIS.pointerThickness/2)-THIS.pointerBorderWidth)+'px';p.crossBY.style.top=p.crossBX.style.left='0';p.crossLY.style.position=p.crossLX.style.position='absolute';p.crossLY.style.background=p.crossLX.style.background=THIS.pointerColor;p.crossLY.style.height=p.crossLX.style.width=(crossOuterSize-2*THIS.pointerBorderWidth)+'px';p.crossLY.style.width=p.crossLX.style.height=THIS.pointerThickness+'px';p.crossLY.style.left=p.crossLX.style.top=(Math.floor(crossOuterSize/2)-Math.floor(THIS.pointerThickness/2))+'px';p.crossLY.style.top=p.crossLX.style.left=THIS.pointerBorderWidth+'px';p.sld.style.overflow='hidden';p.sld.style.width=THIS.sliderSize+'px';p.sld.style.height=THIS.height+'px';p.sldGrad.draw(THIS.sliderSize,THIS.height,'#000','#000');p.sldB.style.display=displaySlider?'block':'none';p.sldB.style.position='absolute';p.sldB.style.right=THIS.padding+'px';p.sldB.style.top=THIS.padding+'px';p.sldB.style.border=THIS.insetWidth+'px solid';p.sldB.style.borderColor=THIS.insetColor;p.sldM._jscInstance=THIS;p.sldM._jscControlName='sld';p.sldM.style.display=displaySlider?'block':'none';p.sldM.style.position='absolute';p.sldM.style.right='0';p.sldM.style.top='0';p.sldM.style.width=(THIS.sliderSize+padToSliderPadding/2+THIS.padding+2*THIS.insetWidth)+'px';p.sldM.style.height=dims[1]+'px';p.sldM.style.cursor='default';p.sldPtrIB.style.border=p.sldPtrOB.style.border=THIS.pointerBorderWidth+'px solid '+THIS.pointerBorderColor;p.sldPtrOB.style.position='absolute';p.sldPtrOB.style.left=-(2*THIS.pointerBorderWidth+THIS.pointerThickness)+'px';p.sldPtrOB.style.top='0';p.sldPtrMB.style.border=THIS.pointerThickness+'px solid '+THIS.pointerColor;p.sldPtrS.style.width=THIS.sliderSize+'px';p.sldPtrS.style.height=sliderPtrSpace+'px';function setBtnBorder(){var insetColors=THIS.insetColor.split(/\s+/);var outsetColor=insetColors.length<2?insetColors[0]:insetColors[1]+' '+insetColors[0]+' '+insetColors[0]+' '+insetColors[1];p.btn.style.borderColor=outsetColor;} p.btn.style.display=THIS.closable?'block':'none';p.btn.style.position='absolute';p.btn.style.left=THIS.padding+'px';p.btn.style.bottom=THIS.padding+'px';p.btn.style.padding='0 15px';p.btn.style.height=THIS.buttonHeight+'px';p.btn.style.border=THIS.insetWidth+'px solid';setBtnBorder();p.btn.style.color=THIS.buttonColor;p.btn.style.font='12px sans-serif';p.btn.style.textAlign='center';try{p.btn.style.cursor='pointer';}catch(eOldIE){p.btn.style.cursor='hand';} p.btn.onmousedown=function(){THIS.hide();};p.btnT.style.lineHeight=THIS.buttonHeight+'px';p.btnT.innerHTML='';p.btnT.appendChild(document.createTextNode(THIS.closeText));redrawPad();redrawSld();if(jsc.picker.owner&&jsc.picker.owner!==THIS){jsc.unsetClass(jsc.picker.owner.targetElement,THIS.activeClass);} jsc.picker.owner=THIS;if(jsc.isElementType(container,'body')){jsc.redrawPosition();}else{jsc._drawPosition(THIS,0,0,'relative',false);} if(p.wrap.parentNode!=container){container.appendChild(p.wrap);} jsc.setClass(THIS.targetElement,THIS.activeClass);} function redrawPad(){switch(jsc.getPadYComponent(THIS)){case's':var yComponent=1;break;case'v':var yComponent=2;break;} var x=Math.round((THIS.hsv[0]/360)*(THIS.width-1));var y=Math.round((1-THIS.hsv[yComponent]/100)*(THIS.height-1));var crossOuterSize=(2*THIS.pointerBorderWidth+THIS.pointerThickness+2*THIS.crossSize);var ofs=-Math.floor(crossOuterSize/2);jsc.picker.cross.style.left=(x+ofs)+'px';jsc.picker.cross.style.top=(y+ofs)+'px';switch(jsc.getSliderComponent(THIS)){case's':var rgb1=HSV_RGB(THIS.hsv[0],100,THIS.hsv[2]);var rgb2=HSV_RGB(THIS.hsv[0],0,THIS.hsv[2]);var color1='rgb('+ Math.round(rgb1[0])+','+ Math.round(rgb1[1])+','+ Math.round(rgb1[2])+')';var color2='rgb('+ Math.round(rgb2[0])+','+ Math.round(rgb2[1])+','+ Math.round(rgb2[2])+')';jsc.picker.sldGrad.draw(THIS.sliderSize,THIS.height,color1,color2);break;case'v':var rgb=HSV_RGB(THIS.hsv[0],THIS.hsv[1],100);var color1='rgb('+ Math.round(rgb[0])+','+ Math.round(rgb[1])+','+ Math.round(rgb[2])+')';var color2='#000';jsc.picker.sldGrad.draw(THIS.sliderSize,THIS.height,color1,color2);break;}} function redrawSld(){var sldComponent=jsc.getSliderComponent(THIS);if(sldComponent){switch(sldComponent){case's':var yComponent=1;break;case'v':var yComponent=2;break;} var y=Math.round((1-THIS.hsv[yComponent]/100)*(THIS.height-1));jsc.picker.sldPtrOB.style.top=(y-(2*THIS.pointerBorderWidth+THIS.pointerThickness)-Math.floor(sliderPtrSpace/2))+'px';}} function isPickerOwner(){return jsc.picker&&jsc.picker.owner===THIS;} function blurValue(){THIS.importColor();} if(typeof targetElement==='string'){var id=targetElement;var elm=document.getElementById(id);if(elm){this.targetElement=elm;}else{jsc.warn('Could not find target element with ID \''+id+'\'');}}else if(targetElement){this.targetElement=targetElement;}else{jsc.warn('Invalid target element: \''+targetElement+'\'');} if(this.targetElement._jscLinkedInstance){jsc.warn('Cannot link jscolor twice to the same element. Skipping.');return;} this.targetElement._jscLinkedInstance=this;this.valueElement=jsc.fetchElement(this.valueElement);this.styleElement=jsc.fetchElement(this.styleElement);var THIS=this;var container=this.container?jsc.fetchElement(this.container):document.getElementsByTagName('body')[0];var sliderPtrSpace=3;if(jsc.isElementType(this.targetElement,'button')){if(this.targetElement.onclick){var origCallback=this.targetElement.onclick;this.targetElement.onclick=function(evt){origCallback.call(this,evt);return false;};}else{this.targetElement.onclick=function(){return false;};}} if(this.valueElement){if(jsc.isElementType(this.valueElement,'input')){var updateField=function(){THIS.fromString(THIS.valueElement.value,jsc.leaveValue);jsc.dispatchFineChange(THIS);};jsc.attachEvent(this.valueElement,'keyup',updateField);jsc.attachEvent(this.valueElement,'input',updateField);jsc.attachEvent(this.valueElement,'blur',blurValue);this.valueElement.setAttribute('autocomplete','off');}} if(this.styleElement){this.styleElement._jscOrigStyle={backgroundImage:this.styleElement.style.backgroundImage,backgroundColor:this.styleElement.style.backgroundColor,color:this.styleElement.style.color};} if(this.value){this.fromString(this.value)||this.exportColor();}else{this.importColor();}}};jsc.jscolor.lookupClass='jscolor';jsc.jscolor.installByClassName=function(className){var inputElms=document.getElementsByTagName('input');var buttonElms=document.getElementsByTagName('button');jsc.tryInstallOnElements(inputElms,className);jsc.tryInstallOnElements(buttonElms,className);};jsc.register();return jsc.jscolor;})();} </script> <script> /* custom functions */ var origImageData;var lastFilter;window.ondragover=function(e){e.preventDefault()} window.ondrop=function(e){e.preventDefault();draw(e.dataTransfer.files[0]);} function saveImageData(){var baseData=sketcher.toImage().replace(/^data:image\/\w+;base64,/,"");document.getElementById("iD").value=baseData;} function drawWhite(){sketcher.context.fillStyle="#FFFFFF";sketcher.context.fillRect(0,0,sketcher.canvas.width,sketcher.canvas.height);} function draw(file){sketcher.context.fillStyle="#000000";sketcher.context.fillRect(0,0,sketcher.canvas.width,sketcher.canvas.height);var img=new Image();img.src=(window.webkitURL?webkitURL:URL).createObjectURL(file);img.onload=function(){var imageAspectRatio=img.width/img.height;var canvasAspectRatio=sketcher.canvas.width/sketcher.canvas.height;var renderableHeight,renderableWidth,xStart,yStart;if(imageAspectRatio<canvasAspectRatio){renderableHeight=sketcher.canvas.height;renderableWidth=img.width*(renderableHeight/img.height);xStart=(sketcher.canvas.width-renderableWidth)/2;yStart=0;}else if(imageAspectRatio>canvasAspectRatio){renderableWidth=sketcher.canvas.width;renderableHeight=img.height*(renderableWidth/img.width);xStart=0;yStart=(sketcher.canvas.height-renderableHeight)/2;}else{renderableHeight=sketcher.canvas.height;renderableWidth=sketcher.canvas.width;xStart=0;yStart=0;} sketcher.context.drawImage(img,xStart,yStart,renderableWidth,renderableHeight);origImageData=sketcher.context.getImageData(0,0,sketcher.canvas.width,sketcher.canvas.height);imageData=origImageData;}} function setRange(x,y){var sliderIn=document.getElementById("sliderInput");var sliderOut=document.getElementById("sliderOutput");if(x<'1'&&y<'1'){sliderIn.style.display="none";sliderOut.value="-";}else{sliderIn.setAttribute("min",x);sliderIn.setAttribute("max",y);sliderIn.style.display="inline";}} function flterColors(r,g,b){this.r=r;this.g=g;this.b=b;} var filters=new Array();filters.push(new flterColors(0xFF,0xFF,0xFF));filters.push(new flterColors(0xEC,0x8A,0x00));filters.push(new flterColors(0xFA,0x96,0x00));filters.push(new flterColors(0xEB,0xB1,0x13));filters.push(new flterColors(0x00,0x6D,0xFF));filters.push(new flterColors(0x00,0x5D,0xFF));filters.push(new flterColors(0x00,0xB5,0xFF));filters.push(new flterColors(0xEA,0x1A,0x1A));filters.push(new flterColors(0xF3,0x84,0x17));filters.push(new flterColors(0xF9,0xE3,0x1C));filters.push(new flterColors(0x19,0xC9,0x19));filters.push(new flterColors(0x1D,0xCB,0xEA));filters.push(new flterColors(0x1D,0x35,0xEA));filters.push(new flterColors(0x9B,0x1D,0xEA));filters.push(new flterColors(0xE3,0x18,0xE3));filters.push(new flterColors(0xAC,0x7A,0x33));filters.push(new flterColors(0xFF,0x00,0x00));filters.push(new flterColors(0x00,0x22,0xCD));filters.push(new flterColors(0x00,0x8C,0x00));filters.push(new flterColors(0xFF,0xD5,0x00));filters.push(new flterColors(0x00,0xC1,0xB1));function hexToRgb(hex){var result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);return result?{r:parseInt(result[1],16),g:parseInt(result[2],16),b:parseInt(result[3],16)}:null;} function loadImage(imgFile,canvas){var pixels=new Image();pixels.src=imageFile;pixels.onload=function(){sketcher.context.drawImage(pixels,0,0);origImageData=sketcher.context.getImageData(0,0,canvas.width,canvas.height);}} function applyFilter(filter,density){if(filter!==lastFilter){density=0;}else{sketcher.context.putImageData(window.origImageData,0,0);} density=parseInt(density,10);imageData=sketcher.context.getImageData(0,0,sketcher.canvas.width,sketcher.canvas.height);var d=imageData.data;switch(filter){case'monochrome':setRange(0,0);for(var i=0;i<d.length;i+=4){var v=0.2126*d[i]+0.7152*d[i+1]+0.0722*d[i+2];d[i]=d[i+1]=d[i+2]=v} break;case'grayscale':setRange(0,0);for(var i=0;i<d.length;i+=4){var luma=0.299*d[i]+0.587*d[i+1]+0.114*d[i+2];d[i]=Math.round(luma);d[i+1]=Math.round(luma);d[i+2]=Math.round(luma);} break;case'invert':setRange(0,0);for(var i=0;i<d.length;i+=4){d[i]=255-d[i];d[i+1]=255-d[i+1];d[i+2]=255-d[i+2];d[i+3]=255;} break;case'duo':setRange(0,0);for(var i=0;i<d.length;i+=4){var luma=0.299*d[i]+0.587*d[i+1]+0.114*d[i+2];d[i]=Math.round(luma);d[i+1]=Math.round(luma);d[i+2]=Math.round(luma);} var shadowColor=document.getElementById('duoShadow').value;var highlightColor=document.getElementById('duoHighlight').value;var rgb1=hexToRgb(shadowColor);var rgb2=hexToRgb(highlightColor);var gradient=[];for(var i=0;i<(256*4);i+=4){gradient[i]=((256-(i/4))*rgb1.r+(i/4)*rgb2.r)/256;gradient[i+1]=((256-(i/4))*rgb1.g+(i/4)*rgb2.g)/256;gradient[i+2]=((256-(i/4))*rgb1.b+(i/4)*rgb2.b)/256;gradient[i+3]=255;} for(var i=0;i<d.length;i+=4){d[i]=gradient[d[i]*4];d[i+1]=gradient[d[i+1]*4+1];d[i+2]=gradient[d[i+2]*4+2];} break;case'ctype':setRange(0,99);for(var i=0;i<d.length;i+=4){d[i]=255-d[i];d[i+1]=255-d[i+1];d[i+2]=255-d[i+2];d[i+3]=255;} f=window.filters[8];if(density<1){density=70;} sliderOutput.value=density;sliderInput.value=density;var rIntensity=(f.r*density+255*(100-density))/25500;var gIntensity=(f.g*density+255*(100-density))/25500;var bIntensity=(f.b*density+255*(100-density))/25500;for(var i=0;i<d.length;i+=4){var luma=0.299*d[i]+0.587*d[i+1]+0.114*d[i+2];d[i]=Math.round(rIntensity*luma);d[i+1]=Math.round(gIntensity*luma);d[i+2]=Math.round(bIntensity*luma);} for(var i=0;i<d.length;i+=4){d[i]=255-d[i];d[i+1]=255-d[i+1];d[i+2]=255-d[i+2];d[i+3]=255;} break;case'pixelate':setRange(0,99);density=Math.round(density/10);if(density<1){density=2;} radius=density;var width=imageData.width;var height=imageData.height;var delta=(2*radius);for(var y=radius;y<height-radius;y+=delta){for(var x=radius;x<width-radius;x+=delta){r=d[((width*y)+x)*4];g=d[((width*y)+x)*4+1];b=d[((width*y)+x)*4+2];for(var ny=-radius;ny<radius;++ny){for(var nx=-radius;nx<radius;++nx){d[((width*(y+ny))+(x+nx))*4]=r;d[((width*(y+ny))+(x+nx))*4+1]=g;d[((width*(y+ny))+(x+nx))*4+2]=b;}}}} break;case'posterize':setRange(0,0);for(var i=0;i<d.length;i+=4){var v=0.2126*d[i]+0.7152*d[i+1]+0.0722*d[i+2];if(v>192){v=255;}else if(v>=128&&v<192){v=192;}else if(v>=64&&v<128){v=128;}else if(v<64){v=64;}else if(v<10){v=0;} d[i]=d[i+1]=d[i+2]=v;} break;case'posterizeV':setRange(0,20);if(density<1){density=8;} sliderOutput.value=density;sliderInput.value=density;var f=(density-1)/255;var inv_f=1/f;for(var i=0;i<d.length;i+=4){d[i]=d[i+1]=d[i+2]=Math.round(((d[i]*4899+d[i+1]*9617+d[i+2]*1868+8192)>>14)*f)*inv_f;} break;case'threshold':setRange(0,99);if(density<1&&density>-1){density=50;} sliderOutput.value=density;sliderInput.value=density;density=Math.round(density*255/99,10);for(var i=0;i<d.length;i+=4){var v=(0.2126*d[i]+0.7152*d[i+1]+0.0722*d[i+2]>=density)?255:0;d[i]=d[i+1]=d[i+2]=v;} break;case'hue.r':setRange(-99,99);if(density<1&&density>-1){density=0;} sliderOutput.value=density;sliderInput.value=density;for(var i=0;i<d.length;i+=4){d[i]+=density;} break;case'hue.g':setRange(-99,99);if(density<1&&density>-1){density=0;} sliderOutput.value=density;sliderInput.value=density;for(var i=0;i<d.length;i+=4){d[i+1]+=density;} break;case'hue.b':setRange(-99,99);if(density<1&&density>-1){density=0;} sliderOutput.value=density;sliderInput.value=density;for(var i=0;i<d.length;i+=4){d[i+2]+=density;} break;case'luminance':setRange(-99,99);if(density<1&&density>-1){density=0;} sliderOutput.value=density;sliderInput.value=density;for(var i=0;i<d.length;i+=4){d[i]+=density;d[i+1]+=density;d[i+2]+=density;} break;case'contrast':setRange(-99,99);if(density<1&&density>-1){density=0;} sliderOutput.value=density;sliderInput.value=density;var factor=(259*(density+255))/(255*(259-density));for(var i=0;i<d.length;i+=4){d[i]=factor*(d[i]-128)+128;d[i+1]=factor*(d[i+1]-128)+128;d[i+2]=factor*(d[i+2]-128)+128} break;case'saturation':setRange(0,99);if(density<1){density=50;} sliderOutput.value=density;sliderInput.value=density;var contrast=(((density-1)*(3-1))/(100-1))+1;var intercept=128*(1-contrast);for(var i=0;i<d.length;i+=4){d[i]=d[i]*contrast+intercept;d[i+1]=d[i+1]*contrast+intercept;d[i+2]=d[i+2]*contrast+intercept;} break;case'85':case'lba':case'81':case'80':case'lbb':case'82':case'sepia':case'uw':case'red':case'orange':case'yellow':case'green':case'cyan':case'blue':case'violet':case'magenta':case'emerald':var f;setRange(0,99);if(filter==='85'){f=window.filters[1];if(density<1){density=20;}}else if(filter==='lba'){f=window.filters[2];if(density<1){density=20;}}else if(filter==='81'){f=window.filters[3];if(density<1){density=20;}}else if(filter==='80'){f=window.filters[4];if(density<1){density=20;}}else if(filter==='lbb'){f=window.filters[5];if(density<1){density=20;}}else if(filter==='82'){f=window.filters[6];if(density<1){density=20;}}else if(filter==='sepia'){f=window.filters[15];if(density<1){density=30;}}else if(filter==='uw'){f=window.filters[20];if(density<1){density=50;}}else if(filter==='red'){f=window.filters[7];if(density<1){density=50;}}else if(filter==='orange'){f=window.filters[8];if(density<1){density=50;}}else if(filter==='yellow'){f=window.filters[9];if(density<1){density=50;}}else if(filter==='green'){f=window.filters[10];if(density<1){density=50;}}else if(filter==='cyan'){f=window.filters[11];if(density<1){density=50;}}else if(filter==='blue'){f=window.filters[12];if(density<1){density=50;}}else if(filter==='violet'){f=window.filters[13];if(density<1){density=20;}}else if(filter==='magenta'){f=window.filters[14];if(density<1){density=50;}}else if(filter==='emerald'){f=window.filters[18];if(density<1){density=50;}} sliderOutput.value=density;sliderInput.value=density;var rIntensity=(f.r*density+255*(100-density))/25500;var gIntensity=(f.g*density+255*(100-density))/25500;var bIntensity=(f.b*density+255*(100-density))/25500;for(var i=0;i<d.length;i+=4){var luma=0.299*d[i]+0.587*d[i+1]+0.114*d[i+2];d[i]=Math.round(rIntensity*luma);d[i+1]=Math.round(gIntensity*luma);d[i+2]=Math.round(bIntensity*luma);} break;case'dummy':break;case'reset':setRange(0,0);imageData=window.origImageData;break;} sketcher.context.putImageData(imageData,0,0);lastFilter=filter;} </script> <style type="text/css"> body{background:slategray;font:.85em "Lucida Grande",sans-serif;color:white;margin:0}#title{background-color:#8bb0f2;color:white;text-shadow:2px 2px 3px steelblue;font-size:1.1em;width:48%;padding:5px 0 5px 12px;margin:0 0 12px 12px;letter-spacing:6px;font-weight:bold}.input{background-color:#fff;color:#5a698b;border-radius:3px;border:1px solid #8595b2;font-size:.85em}input:invalid{border-color:red}input,input:valid{border-color:#ccc}.button,.button-sq,.button-sm{background-color:white;border:1px solid cornflowerblue;color:cornflowerblue;text-align:center;text-decoration:none;display:inline-block;font-size:12px;margin:0 2px;cursor:pointer}.button{padding:3px 3px;font-weight:bold;border-radius:6px;width:60px}.button-sq{padding:3px 3px;font-weight:bold;border-radius:6px;float:right;font-family:Apple Color Emoji;font-size:14px;line-height:14px;width:30px;height:26px}.button-sm{padding:0 3px 2px 3px;border-radius:4px;width:18px;height:18px}}.button:hover,.button-sq:hover,.button-sm:hover{background-color:cornflowerblue;color:white}.center{text-align:center}.right{text-align:right}a{color:white}blockquote{margin:0 0 0 10px}label{color:#a4c0f4;font-size:10px}input[type='range']{vertical-align:middle} </style> </head> <body data-kmwindow="SCREEN(Main,Left,84%),SCREEN(Main,Top,2%),328,520"> <button class="button-sq" name="napkinNew" type="button" title="New canvas" onclick="drawWhite();window.KeyboardMaestro.Submit('New');" style="margin:7px 12px;font-family:Helvetica;">N</button> <button class="button-sq" name="napkinReload" type="button" title="Reload image" onclick="window.KeyboardMaestro.Submit('Reload')" style="margin:7px -3px;font-size:18px;line-height:18px;"><b>↺</b> </button> <button class="button-sq" name="napkinMode" type="button" title="Switch to Text" onclick="window.KeyboardMaestro.Submit('napkinMode')" style="margin:7px 12px;">🖍</button> <div id="title">N A P K I N</div> <blockquote> <form id="form" action="#" method="post" align="left" style="width:310px;height:317"> <canvas id="myOmy"></canvas> <script> var sketcher = atrament('#myOmy', 310, 317); cvs = document.getElementById("myOmy"); // any image file (full path)? var imageFile = window.KeyboardMaestro.GetVariable('napkinReloadImageFile'); if (imageFile) { loadImage(imageFile,cvs); if (window.KeyboardMaestro.GetVariable('napkinImageFileStatus')==='Active File') { window.KeyboardMaestro.SetVariable('napkinReloadImageFile',''); } } else { // new canvas drawWhite(); } </script> <input type="hidden" id="iD" name="napkinImageData"> <div style="font-size:0.8em;background-color:#506880;border-radius:0 0 6px 6px;padding:6px;margin:-3px auto 3px;"> <label>Mode</label> <select onchange="sketcher.mode=event.target.value;" style="width:58px" title="Draw line, Fill areas, Erase to transparent"> <option value="draw" default>Draw</option> <option value="fill" default>Fill</option> <option value="erase" default>Erase</option> </select> &nbsp; <label>Color</label> <input id="chosen-value" value="#ffffff" class="jscolor {hidetext:false, uppercase:false, width:125, height:100, valueElement:'chosen-value', position:'top', borderColor:'#fff', insetColor:'#fff', backgroundColor:'#666', closable:true, closeText:'Active Color'}" title="Foreground color" style="border:1px;border-radius:3px;width:60px" onchange="sketcher.color=event.target.value;"> &nbsp; <label>Smooth Lines</label> <input type="checkbox" onchange="sketcher.smoothing=event.target.checked;" checked autocomplete="off" title="Antialias line drawing"> <br> <label>Thickness</label> <input type="range" id="thickInput" min="1" max="40" step="1" value="2" oninput="thickOutput.value=thickInput.valueAsNumber;sketcher.weight=thickInput.valueAsNumber;" style="width:23%" title="Line weight"> <output id="thickOutput">2</output>px &nbsp; <label>Opacity</label> <input type="range" id="opacityInputId" min="0" max="1.0" step="0.1" value="1.0" oninput="opacityOutputId.value=parseFloat(opacityInputId.value);sketcher.opacity=parseFloat(event.target.value);" style="width:23%" title="Showthrough"> <output id="opacityOutputId">1.0</output> <br> <label>Filter</label> <select id="selectedFilter" oninput="applyFilter(event.target.value,document.getElementById('sliderInput').valueAsNumber);" style="width:62px;" title="Special Effects"> <optgroup label="Photographic"> <option value="monochrome">B&amp;W [uniform]</option> <option value="grayscale">B&amp;W [weighted]</option> <option value="invert">Negative</option> <option value="duo">Duotone</option> <option value="sepia">Sepia ✓</option> <option value="ctype">Cyanotype ✓</option> <option value="pixelate">Pixelate ✓</option> <option value="posterize">Posterize</option> <option value="posterizeV">Posterize ✓</option> <option value="threshold">Threshold ✓</option> <option value="uw">Underwater ✓</option> </optgroup> <option disabled></option> <optgroup label="Adjustments"> <option value="luminance">Luminance ✓</option> <option value="contrast">Contrast ✓</option> <option value="saturation">Saturation ✓</option> </optgroup> <option disabled></option> <optgroup label="Revert &amp; Ignore"> <option value="reset" selected="selected">Reset</option> <option value="dummy">No Change</option> <option disabled></option> <optgroup label="Photo Filters"> <option value="85">85 Warming ✓</option> <option value="lba">LBA Warming ✓</option> <option value="81">81 Warming ✓</option> <option value="80">80 Cooling ✓</option> <option value="lbb">LBB Cooling ✓</option> <option value="82">82 Cooling ✓+</option> </optgroup> <option disabled></option> <optgroup label="Hue Shifts"> <option value="hue.r">Blue-Red ✓</option> <option value="hue.g">Red-Green ✓</option> <option value="hue.b">Yellow-Blue ✓</option> </optgroup> <option disabled></option> <optgroup label="Gels"> <option value="red">Red ✓</option> <option value="orange">Orange ✓</option> <option value="yellow">Yellow ✓</option> <option value="green">Green ✓</option> <option value="cyan">Cyan ✓</option> <option value="blue">Blue ✓</option> <option value="violet">Violet ✓</option> <option value="magenta">Magenta ✓</option> <option value="emerald">Emerald ✓</option> </optgroup> </select> &nbsp; <input id="duoShadow" class="jscolor {hidetext:true, width:125, height:100, valueElement:'duoShadow', value:'#933', position:'top', borderColor:'#fff', insetColor:'#fff', backgroundColor:'#666',closable:true,closeText:'Duotone Shadow'}" title="Duotone shadow color" style="border:1px;border-radius:3px 0 0 3px; width:9px;cursor:default;" oninput="duoShadow=event.target.value;" onchange="if(document.getElementById('selectedFilter').value==='duo'){applyFilter(document.getElementById('selectedFilter').value,'')}"><input id="duoHighlight" class="jscolor {hidetext:true, width:125, height:100, valueElement:'duoHighlight', value:'#ffc', position:'top', borderColor:'#fff', insetColor:'#fff', backgroundColor:'#666',closable:true,closeText:'Highlight Color'}" title="Duotone highlight color" style="border:1px;border-radius:0 3px 3px 0;width:9px;cursor:default;" oninput="duHhighlight=event.target.value;" onchange="if(document.getElementById('selectedFilter').value==='duo'){applyFilter(document.getElementById('selectedFilter').value,'')}"> &nbsp; <label>Amt</label> <input type="range" id="sliderInput" min="0" max="99" step="1" value="0" oninput="sliderOutput.value=sliderInput.value;applyFilter(document.getElementById('selectedFilter').value,sliderInput.valueAsNumber);" style="width:110px" title="Intensity of select effects marked by diamonds"> <output id="sliderOutput">0</output>% </div> </form> <table width="300" style="color:#a4c0f4;font-size:11px;"> <tr valign="middle"> <td align="right">File:</td> <td style="color:white;"> <script> if (window.KeyboardMaestro.GetVariable('napkinImageFileStatus') === "No Active File") { document.write(window.KeyboardMaestro.GetVariable('napkinImageFileStatus')); } else { document.write(window.KeyboardMaestro.GetVariable('napkinImageFile')); } </script> </td> </tr> <tr valign="middle"> <td align="right">Folder:</td> <td style="color:white;"> <script> var myDir = window.KeyboardMaestro.GetVariable('napkinImageDir'); if (myDir.length > 40) { document.write(myDir.substring(0, 40) + "..."); } else { document.write(myDir); } </script> </td> </tr> </table> <div class="right"> <hr width="98%"> <button class="button" name="Help" type="button" onclick="window.KeyboardMaestro.Submit('Help')" style="position:absolute;left:10px;">Help</button> <button class="button" name="Quit" type="button" onclick="window.KeyboardMaestro.Cancel('Quit')">Quit</button> <button class="button" name="Open" type="button" onclick="saveImageData(); window.KeyboardMaestro.Submit('View')">View</button> <button class="button" name="Save" type="button" onclick="if ( document.getElementById('form').checkValidity() ) { saveImageData(); window.KeyboardMaestro.Submit('Save') } else { document.getElementById('form').reportValidity() }">Save</button> </div> </blockquote> </body> </html> TimeOutAbortsMacro UseText ActionColor Purple ActionName Evaluate Results CaseEntries ActionListDisclosed Actions ActionColor Magenta ActionName Custom Floating HTML Prompt: Draw Documentation Floating MacroActionType CustomPrompt Text <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>N A P K I N</title> <style type="text/css"> body{background:slategray;font:.85em "Lucida Grande",serif;color:white;margin:0}#title{background-color:#8bb0f2;color:white;text-shadow:2px 2px 3px steelblue;font-size:1.1em;width:44%;padding:5px 0 5px 12px;margin:0 0 12px 12px;letter-spacing:6px;font-weight:bold} .right{text-align:right;padding-right:10px}.submit{height:29px;width:100%;padding-top:5px;clear:both}.button{background-color:white;border:1px solid cornflowerblue;color:cornflowerblue;padding:3px 3px;text-align:center;text-decoration:none;display:inline-block;font-size:12px;font-weight:bold;margin:0 2px;cursor:pointer;border-radius:6px;width:60px}.button:hover{background-color:cornflowerblue;color:white}blockquote{margin-left:20px}h2{color:lightsteelblue;letter-spacing:6px;font-weight:normal}h3{color:#8bb0f2;font-weight:bold}li{margin-bottom:1em}a,a:link,a:visited,a:active{text-decoration:none;color:navy}a:hover{text-decoration:underline;color:white}code{font:1.2em "Courier",serif;text-shadow:2px 2px 3px steelblue;color:lightsteelblue}p{margin-left:20px;} </style> </head> <body data-kmwindow="SCREEN(Main,Left,55%),SCREEN(Main,Top,15%),525,600"> <div id="title"> N A P K I N </div> <blockquote> <p> <i>26 June 2019</i></p> <a name="co"></a> <h3> CONTENTS: DRAW MODE</h3> <hr> </div> <div style="float:left;width:70px;padding:10px;margin-left:10px;"> <p> <a href="#in">Introduction</a></p> </div> <div style="float:left;width:70px;padding:10px;margin-left:10px;"> <p> USING NAPKIN</p> <p> <a href="#tw">Two&nbsp;Modes</a><br> <a href="#de">Defaults</a><br> <a href="#dr">Drawing</a><br> <a href="#fil">File,&nbsp;Folder</a><br> <a href="#ob">Other Behavior</a></p> </div> <div style="float:left;width:70px;padding:10px;margin-left:5px;"> <p> INTERFACE</p> <p> <a href="#re">Reload</a><br> <a href="#ne">New</a><br> <a href="#op">Help</a><br> <a href="#vi">View</a><br> <a href="#qu">Quit</a><br> <a href="#sa">Save</a></p> </div> <div style="float:left;width:70px;padding:10px;margin-left:5px;"> <p> <a href="#cn">Conclusion</a></p> </div> <br clear="all"> <hr> <a name="in"></a> <h3> INTRODUCTION <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> When you press <code>Command-Right Arrow</code> to activate Napkin, this note-taking macro will sit on the right side of the screen in the front of other windows as you work in other applications.</p> <p> It features two modes: a Text mode to save text snippets and a Draw mode to save images and sketches.</p> <p> Text napkins are written to text files that can be opened by Napkin in your default text editor and searched using your editor's Find command or Textcavator, a Keyboard Maestro that searches multiple files in a directory.</p> <p> Your Draw napkins are bitmaps on which you can drop existing images, annotate them or simply sketch from scratch on a white background. Draw napkins are saved as PNG images files.</p> <p> &nbsp;</p> <h2> U S I N G &nbsp; N A P K I N</h2> <a name="tw"></a> <h3> TWO MODES <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> You're currently in Draw mode. The <code>Mode</code> button (third from right at the top) indicates which mode you are in using a fountain pen 🖋 for Text mode and a red crayon 🖍 for Draw mode.</p> <p> Draw mode provides a compact canvas area to scribble diagrams and drawings as described below. Text mode, which is described in its <code>Help</code> button, provides a text entry area instead.</p> <a name="de"></a> <h3> DEFAULTS <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> No default folder or file are required. If you have saved your drawing, the active file will be displayed beneath the image. If not, a message reminding you there is no active file will be displayed.</p> <p> When you click the <code>Save</code> button, you will be prompted for the folder and file in which to save it. If the file exists, Napkin prompt you to overwrite it. If it doesn't exist, the file will be created and the Napkin written to it.</p> <a name="dr"></a> <h3> DRAWING <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Napkin's Draw mode collects three kinds of information. They include the drawing to save, the file name and the path or folder to that filename.</p> <p> In addition to drawing on the canvas using the provided tools, you can drag an image onto the canvas or use the <code>Reload</code> button to copy an existing drawing onto the canvas.</p> <p> DRAWINGS</p> <p> Before drawing on the canvas, you can select among several controls:</p> <ul> <li><code>Mode</code> selects Draw (line), Fill or Erase mode</li> <li><code>Color</code> sets the color of 1) the first (dark) duotone value and 2) the line or fill to use and the second (light) duotone value</li> <li><code>Smooth Lines</code> antialiases your strokes</li> <li><code>Thickness</code> sets the weight of the line in pixels</li> <li><code>Opacity</code> sets the opacity of the line</li> <li><code>Filter</code> applies special effects to the image</li> <li><code>Duotone Colors</code> sets the gradient color range for duotones</li> <li><code>Amount</code> (Amt) varies selected effects on the image in real time</li> </ul> <p>A few examples:</p> <p> To change the background color, pick the color you want, set the <code>Mode</code> to Fill and click on each background section of the canvas.</p> <p> To draw dots, select a high line thickness (measured in pixels) and click on the canvas, moving just a pixel or so.</p> <p> To posterize an image you have dragged onto the canvas, select one of the Posterize options on the <code>Filter</code> menu. One is fixed at four grays, the other lets you adjust the number of grays with the slider.</p> <p> To revert to the original image, select Reset on the <code>Filter</code> menu.</p> <p> The strength of filters with a check mark after their name can be adjusted with the <code>Amount</code> slider. To use the hidden default value, set the slider to 0.</p> <p> The Duotone isn't really a duotone in the traditional printing industry sense. It applies a gradient to a grayscale rendering of the active image using the two colors you choose in the color buttons next to the Filter popup menu.</p> <p> <code>Erase</code> will restore transparency, deleting everything, including the white background, revealing the window background. You might consider drawing in the background color itself (white or black by default) with a large brush if you just want to remove an element.</p> <a name="fil"></a> <h3> FILE, FOLDER <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Below the canvas controls area is a dashboard showing the File name or status and the Folder name, if an image has been saved.</p> <p> If no image has been loaded or save, the File field will report, "No Active File."</p> <p> You can open an image file for editing using the <code>Reload</code> button on top or by dragging an image file (including JPEG, PNG, TIFF, GIF and video files) onto the canvas. Both will update the File Status.</p> <a name="nf"></a> <h3> OTHER BEHAVIOR <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> The entry window stays active until you <code>Quit</code>.</p> <p> When an image file is dragged onto the canvas, the canvas uses a black background and resizes the image to fit, preserving the aspect ratio.</p> <p> The current file and path are not saved for the next round. Draw mode always begins with a blank canvas. So save your work before quitting.</p> <p> Hover over any of the fields or their buttons for help.</p> <p> The <code>Help</code> button itself erases the canvas.</p> <p> &nbsp;</p> <h2> I N T E R F A C E</h3> <a name="re"></a> <h3> RELOAD <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> If you want to load the canvas with an existing drawing, click the <code>Reload</code> button to the left of the magnifying glass to select the file. You'll be prompted for the file.</p> <a name="ne"></a> <h3> NEW <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> The <code><b>N</b></code> button (for New) in the top right will erase any current drawing and present a new napkin canvas.</p> <a name="he"></a> <h3> HELP <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>Help</code> button takes you to this documentation. It also erases the canvas.</p> <a name="vi"></a> <h3> VIEW <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>View</code> button opens a drawing using the default image viewing application (Preview, for example). If the drawing has not been saved, you'll be prompted for a file and folder name before it is displayed. If it has been saved, you'll be prompted to overwrite or edit the existing name.</p> <a name="qu"></a> <h3> QUIT <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>Quit</code> button quits Napkin without saving. It is the preferred way to exit Napkin.</p> <a name="sa"></a> <h3> SAVE <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> Clicking the <code>Save</code> button writes the current canvas to a folder and file. You are either prompted for a new file name or to overwrite (or edit) the existing one.</p> <a name="cn"></a> <p> &nbsp;</p> <h3> CONCLUSION <span style="color:white">|<span> <a href="#co" style="font-weight:normal;font-size:smaller">Contents</a></h3> <p> In its simplest application, Draw mode provides a compact canvas to record your doodles. But it can also create a thumbnail of an image for annotation with some helpful global edits.</p> <p align="right"> <i>-- <a href="mailto:mrpasini@gmail.com">Mike Pasini</a></i></p> <div class="right submit"> <hr width="99%"> <button class="button" name="OK" type="button" onclick="window.KeyboardMaestro.Submit('OK')">OK</button> </div> <br> <blockquote> </body> </html> TimeOutAbortsMacro UseText ConditionType Matches TestValue Help ActionListDisclosed Actions ActionColor Aqua IsDisclosed MacroActionType SetVariableToText Text text Variable napkinMode ConditionType Matches TestValue napkinMode ActionListDisclosed Actions ActionColor Teal MacroActionType SetVariableToText Text No Active File Variable napkinImageFileStatus ActionColor Teal MacroActionType SetVariableToText Text Variable napkinImageDir ActionColor Teal MacroActionType SetVariableToText Text Variable napkinImageFile ConditionType Matches TestValue New ActionListDisclosed Actions ActionColor Teal ActionName Switch for Prompt for File CaseEntries Actions ActionColor Magenta FileType File Location %Variable%napkinImageDir% MacroActionType PromptForFile NotifyOnFailure Parameter png jpg gif StopOnFailure Variable napkinReloadImageFile WindowTitle Choose an image file: ConditionType StartsWith TestValue 9 Actions ActionColor Magenta DisplayKind Variable HonourFailureSettings IncludeStdErr MacroActionType ExecuteAppleScript Path Text tell application "Keyboard Maestro Engine" set myDir to getvariable "napkinImgDir" end tell tell application (path to frontmost application as text) to set thePath to choose file with prompt "Choose an image file:" default location myDir set thePath to the POSIX path of thePath TimeOutAbortsMacro TrimResults TrimResultsNew UseText Variable napkinTextDir ConditionType StartsWith TestValue 8 MacroActionType Switch Source Variable Variable napkinKMversion ActionColor Teal ActionName Split Path “%Variable%napkinReloadImageFile%” for dashboard FileName napkinImageFile MacroActionType SplitPath Parent napkinImageDir Path %Variable%napkinReloadImageFile% ActionColor Teal MacroActionType SetVariableToText Text %napkinReloadImageFile%?n=%ICUDateTime%m% Variable napkinReloadImageFile ActionColor Teal MacroActionType SetVariableToText Text Active File Variable napkinImageFileStatus ConditionType Matches TestValue Reload ActionListDisclosed Actions ActionColor Magenta ActionName If no open file... Conditions ConditionList ConditionType Variable Variable napkinImageFileStatus VariableConditionType StartsWith VariableValue No ConditionListMatch All ElseActions ActionColor Teal ActionName Check for existing file name Conditions ConditionList ConditionType Path Path %napkinImageDir%/%napkinImageFile% PathConditionType FileExists ConditionListMatch All ElseActionListDisclosed ElseActions MacroActionType IfThenElse ThenActions ActionColor Magenta Buttons Button OK/o Cancel Button Cancel/c Cancel MacroActionType PromptForUserInput Prompt There is already a file in this folder with the name: %napkinImageFile% Make changes to the name or path first or just click OK to overwrite: TimeOutAbortsMacro Title Warning: Duplicate File Name Variables Default %napkinImageFile% Variable napkinImageFile Default %napkinImageDir% Variable napkinImageDir ActionColor Magenta Conditions ConditionList ConditionType Variable Variable Result Button VariableConditionType Contains VariableValue OK ConditionListMatch All ElseActionListDisclosed ElseActions MacroActionType IfThenElse ThenActions ActionColor Magenta ActionName Save image data to dashboard file name Actions ActionColor Teal BaseName napkinImageFileRoot MacroActionType SplitPath Path %napkinImageFile% ActionColor Teal ActionNotes To avoid excluding napkinImage from the shell environment. DisplayKind None HonourFailureSettings IncludeStdErr MacroActionType ExecuteAppleScript Path Text tell application "Keyboard Maestro Engine" set theImage to getvariable "napkinImageData" set theDir to getvariable "napkinImageDir" end tell set filepath to theDir & "/napkin.tmp" set openfile to open for access filepath with write permission write theImage to openfile close access openfile TimeOutAbortsMacro TrimResults TrimResultsNew UseText ActionColor Teal ActionName Execute base64 Shell Script DisplayKind None HonourFailureSettings IncludeStdErr MacroActionType ExecuteShellScript Path Source Nothing Text base64 -D "$KMVAR_napkinImageDir/napkin.tmp" > "$KMVAR_napkinImageDir/$KMVAR_napkinImageFileRoot.png" rm "$KMVAR_napkinImageDir/napkin.tmp" TimeOutAbortsMacro TrimResults TrimResultsNew UseText ActionColor Teal MacroActionType SetVariableToText Text %napkinImageDir%/%napkinImageFile%?n=%ICUDateTime%m% Variable napkinReloadImageFile MacroActionType Group TimeOutAbortsMacro TimeOutAbortsMacro TimeOutAbortsMacro MacroActionType IfThenElse ThenActions ActionColor Teal CaseEntries Actions ActionColor Magenta FileType NewFile Location ~/Documents MacroActionType PromptForFile NotifyOnFailure Parameter napkin.png StopOnFailure Variable napkinReloadImageFile WindowTitle New Image File ConditionType StartsWith TestValue 9 Actions ActionColor Magenta DisplayKind Variable HonourFailureSettings IncludeStdErr MacroActionType ExecuteAppleScript Path Text tell application (path to frontmost application as text) to set thePath to choose file name with prompt "Save the image as:" default name "napkin.png" set thePath to the POSIX path of thePath TimeOutAbortsMacro TrimResults TrimResultsNew UseText Variable napkinReloadImageFile ConditionType StartsWith TestValue 8 MacroActionType Switch Source Variable Variable napkinKMversion ActionColor Teal BaseName napkinImageFileRoot FileName napkinImageFile MacroActionType SplitPath Parent napkinImageDir Path %napkinReloadImageFile% ActionColor Teal MacroActionType SetVariableToText Text %napkinReloadImageFile%?n=%ICUDateTime%m% Variable napkinReloadImageFile ActionColor Teal ActionNotes To avoid excluding napkinImage from the shell environment. DisplayKind None HonourFailureSettings IncludeStdErr MacroActionType ExecuteAppleScript Path Text tell application "Keyboard Maestro Engine" set theImage to getvariable "napkinImageData" set theDir to getvariable "napkinImageDir" end tell set filepath to theDir & "/napkin.tmp" set openfile to open for access filepath with write permission write theImage to openfile close access openfile TimeOutAbortsMacro TrimResults TrimResultsNew UseText ActionColor Teal ActionName Execute base64 Shell Script DisplayKind None HonourFailureSettings IncludeStdErr MacroActionType ExecuteShellScript Path Source Nothing Text base64 -D "$KMVAR_napkinImageDir/napkin.tmp" > "$KMVAR_napkinImageDir/$KMVAR_napkinImageFileRoot.png" rm "$KMVAR_napkinImageDir/napkin.tmp" TimeOutAbortsMacro TrimResults TrimResultsNew UseText ActionColor Teal MacroActionType SetVariableToText Text Active File Variable napkinImageFileStatus TimeOutAbortsMacro ActionColor Magenta Conditions ConditionList ConditionType Variable Variable HTML Result Button VariableConditionType Matches VariableValue View ConditionListMatch All ElseActions IsDisclosed MacroActionType IfThenElse ThenActions ActionColor Teal ActionName Open the file in the default app with its window in front Actions ActionColor Magenta IsDefaultApplication MacroActionType Open1File Path %Variable%napkinImageDir%/%Variable%napkinImageFile% ActionColor Magenta IsDisclosed MacroActionType BringWindowsForward MacroActionType Group TimeOutAbortsMacro TimeOutAbortsMacro ConditionType Matches TestValue View|Save IsDisclosed MacroActionType Switch Source Variable Variable HTML Result Button ConditionType Contains TestValue draw MacroActionType Switch Source Variable Variable napkinMode Conditions ConditionList ConditionType Variable Variable HTML Result Button VariableConditionType Contains VariableValue Quit ConditionListMatch All MacroActionType Until TimeOutAbortsMacro ActionColor Purple ActionName Variable cleanup: Text mode Actions ActionColor Magenta IsDisclosed MacroActionType SetVariableToText Text %Variable%napkinText% Variable napkinTextBackup ActionColor Magenta IsDisclosed MacroActionType SetVariableToText Text %Delete% Variable napkinText IsDisclosed MacroActionType Group TimeOutAbortsMacro ActionColor Purple ActionName Variable cleanup: Draw mode Actions ActionColor Magenta IsDisclosed MacroActionType SetVariableToText Text %Delete% Variable napkinReloadImageFile ActionColor Magenta MacroActionType SetVariableToText Text %Delete% Variable napkinImageData ActionColor Magenta MacroActionType SetVariableToText Text Variable napkinImageDir ActionColor Magenta MacroActionType SetVariableToText Text Variable napkinImageFile ActionColor Magenta MacroActionType SetVariableToText Text Variable napkinImageFilePath IsDisclosed MacroActionType Group TimeOutAbortsMacro ActionColor Purple ActionName If v9, show Applications Palette Conditions ConditionList ConditionType Variable Variable napkinKMversion VariableConditionType StartsWith VariableValue 9 ConditionListMatch All ElseActionListDisclosed ElseActions IsDisclosed MacroActionType IfThenElse ThenActions Action Show ActionColor Magenta IsDisclosed MacroActionType ApplicationsPaletteToggle TimeOutAbortsMacro CreationDate 589175539.17732298 ModificationDate 591939629.72151101 Name Napkin v0.9k Triggers FireType Pressed KeyCode 124 MacroTriggerType HotKey Modifiers 256 UID 668FADBF-B978-42D9-B80F-99C027944F02 Name Work in Progress Theme Size 32 Theme Evening UseDefaultInstead UseText ToggleMacroUID 190EC86B-49C1-487E-A50E-2CAAF0D64881 UID 10AE0F26-B6C4-4A69-8331-2F9789710EEB